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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
关于js datetime的那点事
Nov 15 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
javascript中递归的两种写法
Jan 17 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
详解Vue 如何监听Array的变化
Jun 06 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
npm qs模块使用详解
2020/02/07 Javascript
js判断密码强度的方法
2020/03/18 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
个人自我鉴定怎么写
2013/10/28 职场文书
医学生自荐信
2013/12/03 职场文书
党员的自我评价范文
2014/01/02 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
授权委托书范文
2014/07/31 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
邀请函怎么写
2015/01/30 职场文书