您的位置:首页 > 其它

导航栏滚动到顶部后固定

2016-10-27 07:42 246 查看

导航栏滚动到顶部后固定

http://blog.csdn.net/moqiang02/article/details/17995033

<div style="height:500px;background:#999"></div>
<div id="fixedMenu" style="background:#eee;width:100%;">MENU</div>
<div style="height:1900px;background:#999"></div>
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var ie6 = /msie 6/i.test(navigator.userAgent)
, dv = $('#fixedMenu'), st;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st >= parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: