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 Dialog 实践分享
Oct 22 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python使用Matplotlib画饼图
2018/09/25 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
全球在线商店:BerryLook
2019/04/14 全球购物
医生自荐信
2013/10/11 职场文书
中学生差生评语
2014/01/30 职场文书
家长会标语
2014/06/24 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
react 路由Link配置详解
2021/11/11 Javascript
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server