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 相关文章推荐
文字幻灯片
Jun 26 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
redux处理异步action解决方案
Mar 22 Javascript
js实现滚动条自动滚动
Dec 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设计聊天室步步通
2006/10/09 PHP
PHP个人网站架设连环讲(四)
2006/10/09 PHP
一个PHP分页类的代码
2011/05/18 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
php可变长参数处理函数详解
2017/02/22 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python错误处理操作示例
2018/07/18 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
浅谈python中get pass用法
2019/03/19 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
联想C++笔试题
2012/06/13 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers