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 fullscreen全屏实现代码
Apr 09 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 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 获取远程文件内容的函数代码
2010/03/24 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
python实现手机通讯录搜索功能
2018/02/22 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python如何实现视频转代码视频
2019/06/17 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
会议接待欢迎词
2014/01/12 职场文书
知识竞赛主持词
2014/03/26 职场文书
学校校庆演讲稿
2014/05/22 职场文书
个人承诺书怎么写
2014/05/24 职场文书
医院合作协议书
2014/08/19 职场文书
授权委托书(完整版)
2014/09/10 职场文书
安阳殷墟导游词
2015/02/10 职场文书
信仰纪录片观后感
2015/06/08 职场文书