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中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 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
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
Python中使用中文的方法
2011/02/19 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python函数的作用域及关键字详解
2019/08/20 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
就业意向书范文
2014/04/01 职场文书
师恩难忘教学反思
2014/04/27 职场文书
2014年路政工作总结
2014/12/10 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
员工辞退通知书
2015/04/17 职场文书
写给老师的保证书
2015/05/09 职场文书
寒假生活随笔
2015/08/15 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书