固定顶部导航栏
2017-06-02 00:00
253 查看
直接放代码
我也是抄别人的,备份一下,附原地址:固定头部导航栏
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>菜单滚动至顶部后固定-柯乐义</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150px;} #nav_keleyi_com{padding:10px;position:relative;top:0;background:#125430;width:1000px;} a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;} </style> </head> <body> <div class="wrapper"> <div class="header"></div> <div id="nav_keleyi_com"> <a href="http://keleyi.com/menu/net/" target="_blank">.NET</a> <a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a> <a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a> <a href="http://keleyi.com/menu/csharp/" target="_blank">C#</a> <a href="http://keleyi.com/menu/other/" target="_blank">其他</a> <a href="http://keleyi.com/" target="_blank">首页</a><a href="/menu/aspnet/" target="_blank">ASP.NET</a> <a href="/menu/mvc/" target="_blank">MVC</a></div> </div> <script type="text/javascript" > function menuFixed(id){ var obj = document.getElementById(id); var _getHeight = obj.offsetTop; window.onscroll = function(){ changePos(id,_getHeight); } } function changePos(id,height){ var obj = document.getElementById(id); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop < height){ obj.style.position = 'relative'; }else{ obj.style.position = 'fixed'; } } </script> <script type="text/javascript"> window.onload = function(){ menuFixed('nav_keleyi_com'); } </script> </body> </html>
我也是抄别人的,备份一下,附原地址:固定头部导航栏
相关文章推荐
- 导航栏下拉至一定高度后固定在顶部的特效
- 怎么将导航栏始终固定在窗口顶部,类似bootstrap 的navbar-fixed-top
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效
- 滚动页面, 顶部导航栏固定效果
- 导航栏固定 和 回到顶部 防抖动兼容ie6
- Bootstrap制作 精美渐变顶部固定自适应导航栏
- 当导航栏滚动到浏览器顶部时,固定导航栏
- 导航栏固定在顶部,滑动下面内容,不同的内容块,上面的导航相应的变颜色
- 将导航栏固定在窗口的顶部
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 基于Bootstrap的标准的固定在顶部的导航栏
- 怎么将导航栏始终固定在窗口顶部
- 固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析
- 垂直滚动条滑到页面里面的导航栏时,导航栏固定到窗口顶部
- 如何将导航栏始终固定在窗口顶部:
- 将导航栏始终固定在窗口顶部:
- 页面滚动到指定位置导航栏固定顶部
- 导航栏滚动到顶部后固定
- 固定顶部导航栏