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 div 弹出可拖动窗口
Feb 26 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
javascript连续赋值问题
Jul 08 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
js+css实现红包雨效果
Jul 12 Javascript
小程序实现单选多选功能
Nov 04 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
javascript实现数字时钟效果
Feb 06 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
WHOIS类的修改版
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python获取邮件地址的方法
2015/07/10 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
numpy库reshape用法详解
2020/04/19 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
低碳环保倡议书
2014/04/14 职场文书
信息技术课后反思
2014/04/27 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
车间班组长竞聘书
2015/09/15 职场文书
小学英语教学反思范文
2016/02/15 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle