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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
用于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上传图片、删除图片实现代码
2010/05/12 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python实现对变位词的判断方法
2020/04/05 Python
Django实现celery定时任务过程解析
2020/04/21 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
如何理解python对象
2020/06/21 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
行政人员工作职责
2013/12/05 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
服务标兵事迹材料
2014/05/04 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
导游词之长城八达岭
2019/09/24 职场文书
python pygame入门教程
2021/06/01 Python
Vue监视数据的原理详解
2022/02/24 Vue.js
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers