导航跟随滚动条置顶移动示例代码
更新时间：2013年09月11日 17:44:51 作者：
滚动条滚动时如何让导航置顶移动，这种效果已经在很多网看到了，所以本文也来实现一个，感兴趣的朋友可以学习下
复制代码 代码如下:
#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>
效果图如下：
相关文章
这篇文章主要介绍了JavaScript实现文字与图片拖拽效果的方法,涉及javascript操作文字与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取、赋值等相关操作技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Bootstrap入门书籍之（四）菜单、按钮及导航的相关资料,需要的朋友可以参考下2016-02-02
本文主要通过几个实例对js中作用域进行详细解析，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了原生JS实现图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章介绍了JavaScript获取多个数组的交集简单实例，有需要的朋友可以参考一下2013-11-11
本文，我们将使用 Google 搜索出排名前 10 位的 JavaScript 库，并对它们逐一进行介绍。2010-04-04
下面小编就为大家带来一篇基于复选框demo(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
基于Bootstrap的Java开发问题汇总（Spring MVC）
这篇文章主要为大家汇总了基于Bootstrap的Java开发问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
本文这里给大家总结了一些常用的javascript方法，都是些短小精悍的小代码，提高执行效率，这里推荐给大家。2015-02-02
最新评论