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 相关文章推荐
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
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 number_format() 函数定义和用法
2012/06/01 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
用cssText批量修改样式
2009/08/29 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
python中pycurl库的用法实例
2014/09/30 Python
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python如何停止递归
2020/09/09 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
中队活动总结
2014/08/27 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
作文评语怎么写
2014/12/25 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android