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事件热键兼容ie|firefox
Dec 30 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js中有关IE版本检测
Jan 04 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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编程效率的53个要点(经验小结)
2010/09/04 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python实现udp聊天窗口
2020/03/31 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
涉密人员保密承诺书
2014/05/28 职场文书
视光学专业自荐信
2014/06/24 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书