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 相关文章推荐
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python安装第三方库的3种方法
2015/06/21 Python
Python ftp上传文件
2016/02/13 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python日志模块logbook使用方法
2019/09/19 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Python try except else使用详解
2021/01/12 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
《天游峰的扫路人》教学反思
2014/04/25 职场文书
协议书范文
2015/01/27 职场文书
英语邀请函范文
2015/02/02 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript