简单实现js悬浮导航效果

2019-11-19 17:43:55

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：flexslider.js实现移动端轮播

下一篇：用js制作淘宝放大镜效果