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 相关文章推荐
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
vue文件树组件使用详解
Mar 29 Javascript
js实现购物车功能
Jun 12 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
JavaScript中的this妙用实例分析
May 09 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的ASP防火墙
2006/10/09 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php中的登陆login实例代码
2016/06/20 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
python实现百万答题自动百度搜索答案
2018/01/16 Python
PyQt5每天必学之组合框
2018/04/20 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
使用python3构建文件传输的方法
2019/02/13 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
python生成任意频率正弦波方式
2020/02/25 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
华为的Java面试题
2014/03/07 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
培训通知
2015/04/17 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript