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变量作用域更轻松
Oct 25 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
angularJS 入门基础
Feb 09 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
vue组件实例解析
Jan 10 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
简单学习Python time模块
2016/04/29 Python
python连接mysql实例分享
2016/10/09 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
电子商务自荐书范文
2014/01/04 职场文书
大专生自荐书范文
2014/06/22 职场文书
见习报告的格式
2014/10/31 职场文书
简短清晨问候语
2015/11/10 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书