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键盘事件使用介绍
Nov 01 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
浅谈javascript的调试
Jan 28 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
详解javascript void(0)
Jul 13 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 定义404页面的实现代码
2012/11/19 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
django缓存配置的几种方法详解
2018/07/16 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
用python实现刷点击率的示例代码
2019/02/21 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python调用C/C++的方法解析
2020/08/05 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
简历中自我评价分享
2013/10/09 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
欢迎家长标语
2014/10/08 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2014公司年终工作总结
2014/12/19 职场文书
老干部座谈会主持词
2015/07/03 职场文书
python源码剖析之PyObject详解
2021/05/18 Python