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 chosen动态设置值实例介绍
Aug 08 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
Django模板继承 extend标签实例代码详解
May 16 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 for 循环语句使用方法详细说明
2010/05/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
javascript 闭包
2011/09/15 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
详解vuex之store源码简单解析
2019/06/13 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
使用python为mysql实现restful接口
2018/01/05 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
python实现简单http服务器功能
2018/09/17 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python实现经典排序算法的示例代码
2021/02/07 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
婚纱店策划方案
2014/05/22 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2015年女工委工作总结
2015/07/27 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫