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

2014-04-02 25

实现代码:

<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 innerHTML 的一些问题的解决方法
Jun 22 16
jquery 实现返回顶部功能
Nov 17 22
JS阻止事件冒泡行为和闭包的方法
Jun 16 23
js利用正则表达式检验输入内容是否为网址
Jul 05 39
详解webpack与SPA实践之开发环境搭建
Dec 18 18
AjaxUpLoad.js实现文件上传功能
Mar 02 20
运用js实现图层拖拽的功能
May 24 22
手机访问当前页面