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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
jquery插件validate验证的小例子
May 08 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
js模糊查询实例分享
Dec 26 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 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.MVC的模板标签系统(四)
2006/09/05 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
python实现代码统计器
2019/09/19 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
python 基于opencv去除图片阴影
2021/01/26 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
2014全国两会心得体会
2014/03/17 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
《长相思》听课反思
2014/04/10 职场文书
诚信承诺书模板
2014/05/26 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
同乡会致辞
2015/07/30 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android