滚动时sticky nav

参考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

JS

 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.onscroll=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 });

 

posted @ 2017-10-26 11:37  CodingSwallow  阅读(232)  评论(0)  编辑  收藏  举报