div随滚动条滚动到页面头部固定不动然后距离底部多少像素还原

JavaScript017

div随滚动条滚动到页面头部固定不动然后距离底部多少像素还原,第1张

获取div的高度：offsetTop和滚动条滚动的高度document.scrollTop,

if(div的高度<滚动条的高度){这里设置div的属性position为fixed，top：0}else{这里设置div高度为原来的高度}

<body>

<div style="background: #999height: 500px"></div>

<div id="nav" style="width: 100%background: #eee">菜单</div>

<div style="background: #999height:1900px"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

var nav= $('#nav')

nav.attr('otop', dv.offset().top)//存储原来的距离顶部的距离

$(window).scroll(function () {

st = Math.max(document.body.scrollTop || document.documentElement.scrollTop)

if (st >= parseInt(nav.attr('otop'))) {

if (nav.css('position') != 'fixed') nav.css({ 'position': 'fixed', top:0})

}else if (nav.css('position') != 'static') nav.css({ 'position': 'static' })

})

})

</script>

</body>