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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
详细分析vue响应式原理
Jun 22 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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、Python和Javascript的装饰器模式对比
2015/02/03 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
分享6个隐藏的python功能
2017/12/07 Python
python输入多行字符串的方法总结
2019/07/02 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python count函数使用方法实例解析
2020/03/23 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
项目开发计划书
2014/01/09 职场文书
优秀交警事迹材料
2014/01/26 职场文书
学校搬迁方案
2014/06/15 职场文书
政府四风问题整改措施
2014/10/04 职场文书
工厂标语大全
2014/10/06 职场文书
出国留学英文自荐信
2015/03/25 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
孔子观后感
2015/06/08 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
Python内置的数据类型及使用方法
2022/04/13 Python