这篇文章主要教大家如何简单实现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> 顶部 </div> <div> <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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: