my problem wanted make fixed menubar on top of page when scrolled, wasn't hard, hard part me that, when link part menubar external html menubar shows , fixed on top of page , works when scroll down, when scroll up, stays there
<!doctype html> <html> <head> <title>smint demo</title> <meta name = "keywords" content = "" /> <meta name = "description" content = "" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no"> <link href='http://fonts.googleapis.com/css?family=open+sans:300,400,700' rel='stylesheet' type='text/css'> <link href="css/demo.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> <script type="text/javascript"> $(document).ready( function() { $('.submenu').smint({ 'scrollspeed' : 1000 }); }); (function(){ $.fn.smint = function( options ) { // adding class users div $(this).addclass('smint'); var settings = $.extend({ 'scrollspeed ' : 500 }, options); return $('.smint a').each( function() { if ( settings.scrollspeed ) { var scrollspeed = settings.scrollspeed; } /////////////////////////////////// // initial top offset menu var stickytop = $('.smint').offset().top; // check position , make sticky if needed var stickymenu = function(){ // current distance top var scrolltop = $(window).scrolltop(); // if scroll more navigation, change position fixed , add class 'fxd', otherwise change absolute , remove class if (scrolltop > stickytop) { $('.smint').css({ 'position': 'fixed', 'top':0 }).addclass('fxd'); } else { $('.smint').css({ 'position': 'absolute', 'top':stickytop }).removeclass('fxd'); } }; // run function stickymenu(); // run function every time scroll $(window).scroll(function() { stickymenu(); }); /////////////////////////////////////// $(this).on('click', function(e){ // gets height of users div. used off-setting scroll th emenu doesnt overlap content in div jst scrolled var selectorheight = $('.smint').height(); // stops empty hrefs making page jump when clicked e.preventdefault(); // id pf button clicked var id = $(this).attr('id'); // gets distance top of div class matches button id minus height of nav menu. means nav wont overlap content. var goto = $('div.'+ id).offset().top -selectorheight; // scroll page desired position! $("html, body").animate({ scrolltop: goto }, scrollspeed); }); }); }; })(); function showimage(imgname) { document.getelementbyid('largeimg').src = imgname; showlargeimagepanel(); unselectall(); } function showlargeimagepanel() { document.getelementbyid('largeimgpanel').style.visibility = 'visible'; } function unselectall() { if(document.selection) document.selection.empty(); if(window.getselection) window.getselection().removeallranges(); } function hideme(obj) { obj.style.visibility = 'hidden'; } </script> <style> * {margin: 0; padding: 0; outline: 0;} body { color: #f8e0b3; font-size: 12px; background:#f8e0b3; } h1, h2 { font-family: 'open sans', sans-serif; font-weight: 300; margin:0 0 15px 0; } h1 { font-size: 36px; letter-spacing: -2px; line-height: 100%; } h1.title { font-size: 46px; font-weight: 700; color: #f8e0b3; } h2 { font-size: 24px; } p { margin: 0 0 15px 0; } .menubtn { background: center center no-repeat transparent; background: #f8e0b3; display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 10px; } .clear { clear: both; } .wrap { /*background:url(../images/bg.png) top left repeat-x;*/ width: 100%; max-width: 1140px; min-width: 960px; z-index: 10; position: relative; margin: 0 auto; padding: 0; } .section { width: 100%; max-width: 1140px; min-width: 960px; z-index: 10; position: relative; margin: 0 auto; padding: 0 0 20px 0; } .inner { width: 960px; margin: 0 auto; position: relative; min-height: 50px; padding:30px 0; font-size: 18px; font-family: 'open sans', sans-serif; font-weight: 300; padding:30px 0; } /* selector used menu, needs set position:absolute; */ .submenu { position: absolute; top: 400px; height: 50px; z-index: 1000; width: 100%; max-width: 1140px; min-width: 960px; background: #ff0000; /*за главна категория */ } .submenu .inner { padding:0; font-weight: 400; } .subnavbtn { display: block; height: 35px; width: 8%; float: left; margin: 0px 0px 0 0; text-decoration: none; font-size: 14px; padding: 15px 2% 0 2%; text-align: center; color: #fff; } .end { margin: 0; } /* sections */ .stop { min-height: 630px; background:#f8e0b3; color:#3d3d3d; } .s1 { min-height: 500px; background: #f8e0b3; } .s2 { min-height: 500px; background: #f8e0b3; } .s3 { min-height: 500px; background: #f8e0b3; } .s4 { min-height: 500px; background: #f8e0b3; } .s5 { min-height: 500px; background: #f8e0b3; } .s6 { min-height: 500px; background: #f8e0b3; } .s7 { min-height: 500px; background: #f8e0b3; } h1.border { border-style: solid; border-width: 10px; border-color: #ff0000; } h1 { text-align: center; } p.border { border-style: solid; border-width: 10px; border-color: #ff0000; } p { text-align: center; } #largeimgpanel { text-align: center; visibility: hidden; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(100,100,100, 0.5); } #displayimage{ border-style: solid; border-color: red; } </style> </head> <body> <div class="wrap"> <div class="submenu" > <div class="inner"> <a href="#" id="stop" class="subnavbtn">Блузи</a> <a href="#" id="s1" class="subnavbtn">Ризи </a> <a href="#" id="s2" class="subnavbtn"> Сака</a> <a href="#" id="s3" class="subnavbtn">Аксесоари</a> <a href="#" id="s4" class="subnavbtn">Якета</a> <a href="#" id="s5" class="subnavbtn">Панталони/Дънки</a> <a href="#" id="s6" class="subnavbtn">Обувки</a> <a href="#" id="s7" class="subnavbtn end">Спортни стоки</a> </div> </div> <div class="section stop"> <div class="inner"><img src="heading.jpg" alt="заглавие"> <h1 class="border">Област Пловдив</h1> <p class="border">Мъжки блузи</p> </div> <br class="clear"> </div> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/2.jpg" width="200" height="200" name="show"> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/3.jpg" width="200" height="200" name="show"> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/4.jpg" width="200" height="200" name="show"> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/5.jpg" width="200" height="200" name="show"> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/6.jpg" width="200" height="200" name="show"> <div class="section s1"> <h1 class="border"><font color="black"><a name="mujkirizi">Ризи</a><font></h1> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show"> </div> <div class="section s2"> <h1 class="border"><font color="black"><a name="mujkisaka">Сака</a><font></h1> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show"> </div> <div class="section s3"> <h1 class="border"><font color="black"><a name="mujkiaksesoari"> Аксесоари</a><font></h1> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show"> </div> <div class="section s4"> <h1 class="border"><font color="black"><a name="mujkiiaketa"> Якета</a><font></h1> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show"> </div> <div class="section s5"> <h1 class="border"><font color="black"><a name="mujkipantaloni"> Панталони/Дънки</a><font></h1> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show"> </div> <div class="section s6"> <h1 class="border"><font color="black"><a name="mujkiobuvki"> Обувки</a><font></h1> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show"> </div> <div class="section s7"> <h1 class="border"><font color="black"><a name="mujkisportnistoki"> Спортни стоки</a><font></h1> <img id="displayimage" style="cursor:pointer" onclick="showimage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show"> </div> <div id="largeimgpanel" onclick="hideme(this);"> <img id="largeimg" style="height: 100%; margin: 0; padding: 0;" /> </div> </body> </html>
it works me, it's fixed when scroll down, , when come on top of page goes @ beginning, don't problem, can more specific?
Comments
Post a Comment