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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
vue组件间通信解析
Mar 01 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 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数据库抽象层 PDO
2011/05/07 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
初学JavaScript第二章
2008/09/30 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python 多线程的实例详解
2017/09/07 Python
python通过zabbix api获取主机
2018/09/17 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
科研先进个人典型材料
2014/01/31 职场文书
婚假请假条怎么写
2014/04/10 职场文书
特岗教师个人总结
2015/02/10 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
Python first-order-model实现让照片动起来
2022/06/25 Python