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 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 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正则走开
2008/03/15 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
浅析PHP绘图技术
2013/07/03 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
Python之父谈Python的未来形式
2016/07/01 Python
python删除某个字符
2018/03/19 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python shelve模块实现解析
2019/08/28 Python
Python实现把类当做字典来访问
2019/12/16 Python
简单了解Python write writelines区别
2020/02/27 Python
python实现取余操作的简单实例
2020/08/16 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
安全教育感言
2014/03/04 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android