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 相关文章推荐
JS中 用户登录系统的解决办法
Apr 15 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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
SONY SRF-40W电路分析
2021/03/02 无线电
php Xdebug的安装与使用详解
2013/06/20 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
jQuery的三种$()
2009/12/30 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
Python实现k-means算法
2018/02/23 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
计算机专业自我鉴定
2013/10/15 职场文书
师生聚会感言
2014/01/26 职场文书
运动会演讲稿100字
2014/08/25 职场文书
新教师个人工作总结
2015/02/06 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
解决numpy和torch数据类型转化的问题
2021/05/23 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers