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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
jqTransform美化表单
Oct 10 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue 实现特定条件下绑定事件
Nov 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 字符转义 注意事项
2009/05/27 PHP
PHP源码之explode使用说明
2011/08/05 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
python getopt 参数处理小示例
2009/06/09 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python 数据结构之旋转链表
2017/02/25 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
用python批量下载apk
2020/12/29 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
幼教求职信
2014/03/12 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
毕业典礼主持词
2015/06/29 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS