Jquery实现侧边栏跟随滚动条固定(兼容IE6)


Posted in Javascript onApril 02, 2014

部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告。

jQuery代码:

var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改
var offset = rollSet.offset();
$(window).scroll(function () {
 // 检查对象的顶部是否在游览器可见的范围内
 var scrollTop = $(window).scrollTop();
 if(offset.top < scrollTop){
  rollSet.addClass('fixed');
 }else{
  rollSet.removeClass('fixed');
 }
});

CSS代码:
.fixed{position:fixed; top:20px;}
.fixed{_position:absolute; _top:expression((20+(noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}//兼容IE6
Javascript 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 #Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 #Javascript
自己实现ajax封装示例分享
Apr 01 #Javascript
jquery分页对象使用示例
Apr 01 #Javascript
JavaScript对象的property属性详解
Apr 01 #Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 #Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 #Javascript
You might like
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
初步理解Python进程的信号通讯
2015/04/09 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python数组过滤实现方法
2015/07/27 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
社区春季防火方案
2014/06/02 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
地震慰问信
2015/02/14 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
redis lua限流算法实现示例
2022/07/15 Redis