滚动时sticky nav

最新推荐文章于 2023-07-16 20:45:38 发布

weixin_30496431

最新推荐文章于 2023-07-16 20:45:38 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/coding-swallow/p/7735974.html

版权

参考w3c

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>JS Bin</title>
 7   <link rel="stylesheet" type="text/css" href="test.css">
 8   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 9 </head>
10 <body onscroll="testSticky()">
11   <div id="header">
12     <h3>Hello World</h3>
13     <p>welcome to coding world</p>
14   </div>
15   <ul id="nav">
16     <li>one</li>
17     <li>two</li>
18     <li>three</li>
19   </ul>
20   <div id="content">
21     <h3>hello sticky nav when scroll the page</h3>
22     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
23     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
24     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
25     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
26     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
27     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
28     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
29     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
30     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
31     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
32     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
33     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
34     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
35     <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
36   </div>
37 </body>
38 </html>

HTML

 1 #header{
 2   background:#ccc;
 3   padding:10px;
 4   text-align:center;
 5   margin:0;
 6   width:100%;
 7 }
 8 #nav{
 9   background:#000;
10   margin:0px;
11   list-style:none;
12   width:100%;
13 }
14 #nav li{
15   display:inline-block;
16   width:100px;
17   height:30px;
18   line-height:30px;
19   background:orange;
20   text-align:center;
21 }
22 #content{
23   padding:10px 40px;
24   width:100%;
25 }
26 .sticky{
27   position:fixed;
28   top:0;
29   width:100%;
30 }

CSS

 1 /*
 2  * 在页面滚动过程中，页面Y轴相对位移不断变化，
 3  * 当再滚动一下navigator就要被掩藏的时候，
 4  * 使navigator stick在页面顶部
 5  */
 6 var nav=document.getElementById("nav");//获取navigator
 7 var navTop=nav.offsetTop;//获取navigator的top值
 8 function testSticky(){
 9   if(window.pageYOffset>=navTop){
10     nav.classList.add('sticky');
11   }
12   else{
13     nav.classList.remove('sticky');
14   }
15 }

JS 分离JS和Html

1 document.body.οnscrοll=function(){
2   testSticky();
3 }

JQuery实现

 1 /*
 2  * 在页面滚动过程中，页面Y轴相对位移不断变化，
 3  * 当再滚动一下navigator就要被掩藏的时候，
 4  * 使navigator stick在页面顶部
 5  */
 6 $(function(){
 7   $(window).scroll(function(){
 8     if(window.pageYOffset>=($('#nav').offset().top)){
 9       $('#nav').addClass('sticky');
10     }
11     else{
12       $('#nav').removeClass('sticky');
13     }
14   });
15 });