鼠标滚轮，滚动到指定位置时，顶部导航条固定
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!-- js引用包 --> <script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script> <style> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}#wrapper { width: 100%; position: relative; } #container { width: 100%; position: relative; background: #303030; z-index: -5; } header.home { max-width: 760px; position: relative; margin: 0 auto; text-align: center; } header.home img { max-width: 300px; margin: 0 auto; position: relative; text-align: center; } .home-title { font-family: "coquette"; font-size: 3em; color: white; margin: 10px 0px 20px 0px; } .home-desc { font-family: "coquette"; font-size: 1.8em; color: white; margin: 0px 0px 20px 0px; line-height: 1.3em; } #top_intro { width: 100%; } .le-background { position: fixed; top: 0px; left: 0; bottom: 0; right: 0; width: 100%; z-index: -2; opacity: 0.6; background: #303030; background-size: cover !important; background-position: center; background-repeat: no-repeat no-repeat; } .blurred { opacity: 0; } #mainMenuBar { width: 100%; background-color: white; z-index: 100; } #mainMenuBar ul { margin: 0 auto; text-align: center; position: relative; padding: 20px; border-bottom: 1px solid black; } #mainMenuBar li { display: inline-block; color: black; margin-left: 30px; font-size: 1.2em; font-family: "proxima-nova"; font-weight: 100; } #content { width: 100%; position: relative; background-color: white; padding-top: 20px; } #content p { font-size: 1.2em; font-family: "proxima-nova"; font-weight: 100; max-width: 640px; margin: 0 auto; line-height: 1.4em; padding: 10px 0px 10px 0px; } .stick { position: fixed; top: 0; } </style> </head> <body> <div id="wrapper"> <div id="container"> <header class="home"> <h1 class="home-title">Waney Wood</h1> <h2 class="home-desc">WaneyWood produces a range of distinctive home products all handcrafted with wood, from our workshop in Devon, England and all timber is purchased locally from sustainable sources</h2> </header> <div id="mainMenuBarAnchor"></div> <div id="mainMenuBar"> <ul> <li>Home</li> <li>Shop</li> <li>Blog</li> <li>About Us</li> <li>Contact</li> </ul> </div> <div id="content"> <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p> <p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p> <p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p> <p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p> <p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p> <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p> <p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p> <p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p> <p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p> <p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p> <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p> <p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p> <p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p> <p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p> <p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p> </div> </div> </div> </body> <script style='text/javascript'> $(document).ready(function() { // Cache selectors for faster performance. var $window = $(window), $mainMenuBar = $('#mainMenuBar'), $mainMenuBarAnchor = $('#mainMenuBarAnchor'); // Run this on scroll events. //scroll() //当用户滚动指定的元素时，会发生scroll事件。 //scroll事件适用于所有可滚动的元素和window对象（浏览器窗口） //scroll()方法触发scroll事件，或规定当发生scroll事件时运行的函数 $window.scroll(function() { //scrollTop()方法返回或设置匹配元素的滚动条的垂直位置 var window_top = $window.scrollTop(); //javascript用offsetTop();jquery用offset().top; var div_top = $mainMenuBarAnchor.offset().top; if (window_top > div_top) { // Make the div sticky. $mainMenuBar.addClass('stick'); $mainMenuBarAnchor.height($mainMenuBar.height()); } else { // Unstick the div. $mainMenuBar.removeClass('stick'); $mainMenuBarAnchor.height(0); } }); }); </script> </html>
文章转自：http://www.cnblogs.com/dreamflower/p/5223335.html
