简单实现js悬浮导航效果
2017-02-05 09:49
555 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- JS+CSS实现简单的二级下拉导航菜单效果
- JS+CSS实现简单的二级下拉导航菜单效果
- JS 拖动效果实现代码 比较简单
- js最简单的拖拽效果实现代码
- 用js实现简单的左右两边固定广告效果
- js 固定悬浮效果实现思路代码
- js 固定悬浮效果实现思路代码
- 简单实现谷歌地图的图片缩放,移动效果的JS
- 分享超简单实用的用JS实现DIV、图片圆角效果,关键是很兼容
- JS简单实用的倒计时效果实现代码
- 用js实现简单的鼠标跟随效果
- 自动悬浮于顶部的固定菜单 --- 可以实现新浪微博顶部导航菜单一样的效果
- js 实现无干扰阴影效果 简单好用(附文件下载)
- JS简单实用的倒计时效果实现代码
- 用JS类实现简单Ajax效果
- JS实现网页漂浮广告效果简单
- CSS简单实现网页悬浮效果(对联广告)
- 简单JS 实现窗口抖动效果
- JS实现简单悬浮框
- 纯CSS3实现带动画效果导航菜单无需js