手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >导航跟随滚动条置顶移动示例代码
导航跟随滚动条置顶移动示例代码
摘要:复制代码代码如下:#topmenu{position:absolute;top:100px;background:#4b4a4a;width...

复制代码 代码如下:

#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>

效果图如下:

1

【导航跟随滚动条置顶移动示例代码】相关文章:

些很实用且必用的小脚本代码

解析Node.js基于模块和包的代码部署方式

强制设为首页代码

JS函数实现鼠标指向图片后显示大图代码

JavaScript Base64编码和解码,实现URL参数传递。

将HTML自动转为JS代码

JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)

jquery中map函数遍历数组用法实例

网页里控制图片大小的相关代码

一端时间轮换的广告

精品推荐
分类导航