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 的 prototype问题。
Jan 03 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JavaScript 异步时序问题
Nov 20 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
google地图的路线实现代码
2009/08/20 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python常用特殊方法实例总结
2019/03/22 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python 实现客户端与服务端的通信
2020/12/23 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
暑期社会实践感言
2014/02/25 职场文书
大学生自我鉴定书
2014/03/24 职场文书
会计做账心得体会
2016/01/22 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python