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之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
php跨域调用json的例子
Nov 13 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
解决python3输入的坑——input()
2020/12/05 Python
python编程的核心知识点总结
2021/02/08 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
.NET概念性的面试题
2012/02/29 面试题
致跳高运动员加油稿
2014/02/12 职场文书
三万活动总结
2014/04/28 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python