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 相关文章推荐
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
JavaScript分页组件使用方法详解
Jul 26 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数组实例总结与说明
2011/08/23 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
某公司部分笔试题
2013/11/05 面试题
毕业生优秀推荐信
2013/11/26 职场文书
旅游项目开发策划书
2014/01/18 职场文书
高二生物教学反思
2014/01/27 职场文书
总裁助理岗位职责
2014/02/17 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
药店采购员岗位职责
2014/09/30 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
刑事法律意见书
2015/06/04 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
Golang解析JSON对象
2022/04/30 Golang
mysql sock文件存储了什么信息
2022/07/15 MySQL
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技