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格式化数字的函数代码
Nov 30 Javascript
jquery 使用点滴函数代码
May 20 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
js代码实现轮播图
May 04 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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一些十分严重的缺陷详解
2013/06/03 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python同步两个文件夹下的内容
2019/08/29 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python爬虫请求头设置代码
2020/07/28 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
机电一体化专业求职信
2014/07/22 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
消防安全月活动总结
2015/05/08 职场文书