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对象之内置对象Math使用方法
Apr 16 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python占用的内存优化教程
2019/07/28 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python调用飞书发送消息的示例
2020/11/10 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
群众路线党员个人剖析材料
2014/10/08 职场文书
晚会开幕词
2015/01/28 职场文书
学习心理学心得体会
2016/01/22 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android