本文實例為大家分享了js懸浮導航的具體代碼，供大家參考，具體內容如下
<head> <meta charset="UTF-8"> <title>懸浮導航</title> <style> * { margin: 0px; padding: 0px; } ul li{ list-style: none; } body{ height: 2000px; } #top{ height: 300px; width: 100%; background-color: red; } #nav{ height: 50px; line-height: 50px; width: 100%; background-color: pink; } #nav ul{ width: 1200px; margin: 0 auto; } #nav ul li{ float: left; width: 164px; text-align: center; } </style></head><body> <div id="top"> 頂部 </div> <div id="nav"> <ul> <li>首頁</li> <li>首頁</li> <li>首頁</li> <li>首頁</li> <li>首頁</li> <li>首頁</li> <li>首頁</li> </ul> </div></body><script> var ad = document.getElementById("nav") window.onscroll = function(){ var _top = document.body.scrollTop || document.documentElement.scrollTop;//兼容 if(_top>=300){ ad.style.position = "fixed"; ad.style.top = 0 +"px"; }else{ ad.style.position = "absolute"; ad.style.top = 300+"px"; } }</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
