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创建命名空间(namespace)的最简实现
Dec 11 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
js登录弹出层特效
2014/03/07 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python学生管理系统的实现
2020/04/05 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
车间调度岗位职责
2013/11/30 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
诚信考试标语
2014/06/24 职场文书
预备党员介绍人意见
2015/06/01 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android