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 相关文章推荐
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
Vue实现简易计算器
Feb 25 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
js动态生成表格(节点操作)
Jan 12 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
深入理解es6块级作用域的使用
2019/03/28 Javascript
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python3 读取Excel表格中的数据
2018/10/16 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
python跨文件使用全局变量的实现
2020/11/17 Python
python中entry用法讲解
2020/12/04 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
指针和引用有什么区别
2013/01/13 面试题
企业军训感言
2014/02/08 职场文书
工厂车间标语
2014/06/19 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
2014年图书室工作总结
2014/12/09 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Python 中的Sympy详细使用
2021/08/07 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL