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 处理事件绑定的一些兼容写法
Dec 24 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 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设计模式 Facade(外观模式)
2011/06/26 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
CCPry JS类库 代码
2009/10/30 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
Java程序员常见面试题
2015/07/16 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
心得体会怎么写
2013/12/30 职场文书
企业元宵节主持词
2014/03/25 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
小人国观后感
2015/06/11 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL