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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
js中this的用法实例分析
Jan 10 Javascript
详解Document.Cookie
Dec 25 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
详解用async/await来处理异步
Aug 28 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python开发游戏的前期准备
2019/05/05 Python
Django REST framework 分页的实现代码
2019/06/19 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python反转列表的三种方式解析
2019/11/08 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
华为c/c++笔试题
2016/01/25 面试题
历史系自荐信范文
2013/12/24 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
工厂标语大全
2014/10/06 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
社区重阳节活动总结
2015/03/24 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书