导航跟随滚动条置顶移动示例代码
2013-09-11 00:00
531 查看
#topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0} <script type="text/javascript"> jQuery(document).ready(function() { var topmenu = jQuery("#topmenu"); var topmenu_top = topmenu.offset().top; reset_topmenu_top(topmenu, topmenu_top); jQuery(window).scroll(function() { reset_topmenu_top(topmenu, topmenu_top); }); }); function reset_topmenu_top(topmenu, topmenu_top) { var document_scroll_top = jQuery(document).scrollTop(); if (document_scroll_top > topmenu_top) { topmenu.css('top', document_scroll_top); } if (document_scroll_top <= topmenu_top) { topmenu.css('top', topmenu_top); } } </script>
效果图如下:
相关文章推荐
- 导航跟随滚动条置顶移动示例代码
- 右边滚动条移动时导航条置顶效果
- jQuery 导航自动跟随滚动的实现代码
- jQuery实现的监听导航滚动置顶状态功能示例
- 导航滚动置顶
- node.js文件上传重命名以及移动位置的示例代码
- jQuery 顶部导航跟随滚动,固定浮动在顶部
- jQuery循环滚动新闻列表示例代码
- jquery实现tr元素的上下移动示例代码
- Unity中SmoothDamp 平滑阻尼--相机跟随角色移动的示例
- HTML5实现一个能够移动的小坦克示例代码
- JS实现图片横向滚动效果示例代码
- jquery加CSS3实现导航跟随鼠标移动
- Android RecyclerView 实现快速滚动的示例代码
- unity3d相机跟随物体平滑移动(C#代码)
- 跟随鼠标移动的js代码
- js动态移动滚动条至底部示例代码
- Javascript 鼠标移动上去 滑块跟随效果代码分享
- [置顶] Android在代码中打开Wifi、移动网络和GPS
- 网页右侧悬浮滚动在线qq客服代码示例