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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Angular2数据绑定详解
Apr 18 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
小程序实现文字循环滚动动画
Jun 14 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中SESSION的注销与清除
2015/04/16 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
删除重复数据的算法
2006/11/23 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
详解python中的Turtle函数库
2018/11/19 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
学生会招新宣传语
2015/07/13 职场文书
中学校园广播稿
2015/08/18 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
基于angular实现树形二级表格
2021/10/16 Javascript
python实现商品进销存管理系统
2022/05/30 Python