jQuery判断div随滚动条滚动到一定位置后停止

2014-04-02 13

实现代码:

<script type="text/javascript">
var rollSet = $('#widget');
    var offset = rollSet.offset();
    var fwidth = $("#footer").height();
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height();
        if (offset.top < scrollTop) {
            if (scrollBtm > fwidth) {
                rollSet.removeClass('absolute').addClass('fixed')
            } else {
                rollSet.removeClass('fixed').addClass('absolute')
            }
        } else {
            rollSet.removeClass('fixed')
        }
    })
</script>

方法说明:
由页面总高度减去已滚动的高度再减去ID为widget的层的高度即等于该层底部距离底部的高度;
当距离底部的高度小于或等于特定位置距离底部的高度时,去掉样式fixed,然后给该层添加绝对定位!
CSS中要给父父层添加position:relative;

展开阅读全文

更多Javascript文章

大家未必知道的Js技巧收藏
Apr 07 6
javascript 可以拖动的DIV(二)
Jun 26 13
jquery 滚动条事件简单实例
Jul 12 12
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 10
jQuery()方法的第二个参数详解
Apr 29 2
JS+CSS实现DIV层的展开、收缩效果
Jan 28 3
vue实现点击追加选中样式效果
Nov 01 13
手机访问当前页面