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


Posted in Javascript onApril 02, 2014

实现代码:

<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 相关文章推荐
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
Angular实现表单验证功能
Nov 13 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 #Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 #Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 #Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 #Javascript
自己实现ajax封装示例分享
Apr 01 #Javascript
jquery分页对象使用示例
Apr 01 #Javascript
JavaScript对象的property属性详解
Apr 01 #Javascript
You might like
用php将任何格式视频转为flv的代码
2009/09/03 PHP
php5 图片验证码实现代码
2009/12/11 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php的4种常见运行方式
2015/03/20 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
优秀教师主要事迹
2014/02/01 职场文书
股份转让协议书
2014/04/12 职场文书
出生医学证明书
2014/09/15 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers