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之ESC(第二类混淆)
May 06 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
vue+Element-ui实现分页效果
Nov 15 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将文本文件转换csv输出的方法
2014/12/31 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
Three.js快速入门教程
2016/09/09 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
sublime text 3配置使用python操作方法
2017/06/11 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python restful框架接口开发实现
2020/04/13 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
大学生军训自我评价分享
2013/11/09 职场文书
初中科学教学反思
2014/01/21 职场文书
党校学习自我鉴定
2014/02/24 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技