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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
再谈JavaScript线程
Jul 10 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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
example2.php
2006/10/09 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python实现单词翻译功能
2017/06/06 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python数据集切分实例
2018/12/08 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
班组长工作职责
2013/12/25 职场文书
幼儿教育感言
2014/02/05 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
小学家长学校培训材料
2014/08/24 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python