当导航条滚动到顶部时固定到顶部

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 奇怪的滚动行为,顶部的弹跳效果在滚动到顶部时自动切断/生涩

我想实现打开页面时隐藏顶部那个层, 滚动条下拉几百距离时就出现隐藏的层 当滚动条到顶部时又隐藏

再次滚动到顶部时的 TwoWayView 空白问题

UITableViewcontentInset:当滚动表格到顶部时,行在第一个标题上方仍然可见

滚动到顶部时删除类

底部对齐的导航棒滚动到顶部