滚动时sticky nav
Posted CodingSwallow
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动时sticky nav相关的知识，希望对你有一定的参考价值。
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>
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 }
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 });
以上是关于滚动时sticky nav的主要内容，如果未能解决你的问题，请参考以下文章