当导航条滚动到顶部时固定到顶部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当导航条滚动到顶部时固定到顶部相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=‘utf-8‘ /> 5 <!-- js引用包 --> 6 <script src=‘http://libs.baidu.com/jquery/1.9.0/jquery.min.js‘></script> 7 8 <style> 9 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 { 10 width: 100%; 11 position: relative; 12 } 13 14 #container { 15 width: 100%; 16 position: relative; 17 background: #303030; 18 z-index: -5; 19 } 20 21 header.home { 22 max-width: 760px; 23 position: relative; 24 margin: 0 auto; 25 text-align: center; 26 } 27 header.home img { 28 max-width: 300px; 29 margin: 0 auto; 30 position: relative; 31 text-align: center; 32 } 33 34 .home-title { 35 font-family: "coquette"; 36 font-size: 3em; 37 color: white; 38 margin: 10px 0px 20px 0px; 39 } 40 41 .home-desc { 42 font-family: "coquette"; 43 font-size: 1.8em; 44 color: white; 45 margin: 0px 0px 20px 0px; 46 line-height: 1.3em; 47 } 48 49 #top_intro { 50 width: 100%; 51 } 52 53 .le-background { 54 position: fixed; 55 top: 0px; 56 left: 0; 57 bottom: 0; 58 right: 0; 59 width: 100%; 60 z-index: -2; 61 opacity: 0.6; 62 background: #303030; 63 background-size: cover !important; 64 background-position: center; 65 background-repeat: no-repeat no-repeat; 66 } 67 68 .blurred { 69 opacity: 0; 70 } 71 72 #mainMenuBar { 73 width: 100%; 74 background-color: white; 75 z-index: 100; 76 } 77 #mainMenuBar ul { 78 margin: 0 auto; 79 text-align: center; 80 position: relative; 81 padding: 20px; 82 border-bottom: 1px solid black; 83 } 84 #mainMenuBar li { 85 display: inline-block; 86 color: black; 87 margin-left: 30px; 88 font-size: 1.2em; 89 font-family: "proxima-nova"; 90 font-weight: 100; 91 } 92 93 #content { 94 width: 100%; 95 position: relative; 96 background-color: white; 97 padding-top: 20px; 98 } 99 #content p { 100 font-size: 1.2em; 101 font-family: "proxima-nova"; 102 font-weight: 100; 103 max-width: 640px; 104 margin: 0 auto; 105 line-height: 1.4em; 106 padding: 10px 0px 10px 0px; 107 } 108 109 .stick { 110 position: fixed; 111 top: 0; 112 } 113 114 </style> 115 </head> 116 <body> 117 <div id="wrapper"> 118 <div id="container"> 119 <header class="home"> 120 <h1 class="home-title">Waney Wood</h1> 121 <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> 122 </header> 123 124 125 126 <div id="mainMenuBarAnchor"></div> 127 <div id="mainMenuBar"> 128 <ul> 129 <li>Home</li> 130 <li>Shop</li> 131 <li>Blog</li> 132 <li>About Us</li> 133 <li>Contact</li> 134 </ul> 135 </div> 136 <div id="content"> 137 138 <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> 139 140 <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> 148 <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> 149 150 <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> 151 152 <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> 153 154 155 <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> 156 157 <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> 158 159 <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> 160 161 <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> 162 163 <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> 164 165 <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> 166 167 <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> 168 169 <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> 170 171 <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> 172 173 <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> 174 175 </div> 176 177 </div> 178 </div> 179 </body> 180 181 <script style=‘text/javascript‘> 182 $(document).ready(function() { 183 // Cache selectors for faster performance. 184 var $window = $(window), 185 $mainMenuBar = $(‘#mainMenuBar‘), 186 $mainMenuBarAnchor = $(‘#mainMenuBarAnchor‘); 187 188 // Run this on scroll events. 189 //scroll() 190 //当用户滚动指定的元素时，会发生scroll事件。 191 //scroll事件适用于所有可滚动的元素和window对象（浏览器窗口） 192 //scroll()方法触发scroll事件，或规定当发生scroll事件时运行的函数 193 $window.scroll(function() { 194 //scrollTop()方法返回或设置匹配元素的滚动条的垂直位置 195 var window_top = $window.scrollTop(); 196 //javascript用offsetTop();jquery用offset().top; 197 var div_top = $mainMenuBarAnchor.offset().top; 198 if (window_top > div_top) { 199 // Make the div sticky. 200 $mainMenuBar.addClass(‘stick‘); 201 $mainMenuBarAnchor.height($mainMenuBar.height()); 202 } 203 else { 204 // Unstick the div. 205 $mainMenuBar.removeClass(‘stick‘); 206 $mainMenuBarAnchor.height(0); 207 } 208 }); 209 }); 210 211 </script> 212 </html>
以上是关于当导航条滚动到顶部时固定到顶部的主要内容，如果未能解决你的问题，请参考以下文章
带有导航栏大标题的 UITableView 奇怪的滚动行为，顶部的弹跳效果在滚动到顶部时自动切断/生涩
我想实现打开页面时隐藏顶部那个层， 滚动条下拉几百距离时就出现隐藏的层 当滚动条到顶部时又隐藏