js,悬浮导航本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
js,悬浮导航
|
