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

2014-04-02 44

实现代码:

<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文章

关于document.cookie的使用javascript
Oct 29 38
5个javascript的数字格式化函数分享
Dec 07 41
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 121
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 55
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 41
微信小程序实现获取用户信息并存入数据库操作示例
May 07 54
layui自定义ajax左侧三级菜单
Jul 26 44
手机访问当前页面