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 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
JS实现滑动导航效果
Jan 14 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
深入分析python 排序
2020/08/24 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
会计专业自荐信范文
2013/12/02 职场文书
自我评价的范文
2014/02/02 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
南京大屠杀观后感
2015/06/02 职场文书
九九重阳节致辞
2015/07/31 职场文书
任命书格式范文
2015/09/22 职场文书