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 while语句和do while语句的区别分析
Dec 08 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 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 echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
php递归函数怎么用才有效
2018/02/24 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
js实现简单的验证码
2015/12/25 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python 实现单通道转3通道
2019/12/03 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
比赛口号大全
2014/06/10 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
交警失职检讨书
2015/01/26 职场文书
开天辟地观后感
2015/06/09 职场文书
实现GO语言对数组切片去重
2022/04/20 Golang