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 相关文章推荐
取得父标签
Nov 14 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 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 UBB 解析实现代码
2011/11/27 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
应届专科生个人的自我评价
2014/01/05 职场文书
大型晚会策划方案
2014/02/06 职场文书
《燕子》教学反思
2014/02/18 职场文书
党支部先进事迹材料
2014/12/24 职场文书
单位委托函范文
2015/01/29 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
公司开除员工通知
2015/04/22 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js