JS實例之滾動固定效果，實現頂部菜單固定效果。
阿新 • • 發佈：2017-06-22
rip bsp 實現 con tel body text 滾動 title
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>無標題文檔</title> 4 <style type="text/css"> 5 *{margin:0px auto; padding:0px;} 6 #tou{width:100%; height:200px; background-color:#06C;} 7 #menu{width:100%; height:80px; background-color:#666;} 8 #neirong{width:100%; height:2000px;} 9 </style> 10 </head> 11 12 <body> 13 <div id="tou"></div> 14 <div id="menu"></div> 15 <div id="neirong"></div> 16 </body> 17 <script type="text/javascript"> 18 window.onscroll =function(){ 19 if(window.scrollY>=200){ 20 document.getElementById("menu").style.position="fixed"; 21 document.getElementById("menu").style.top="0px"; 22 }else{ 23 document.getElementById("menu").style.position=""; 24 } 25 } 26 </script> 27 </html>
JS實例之滾動固定效果，實現頂部菜單固定效果。