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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
用于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加速 eAccelerator配置和使用指南
2009/06/05 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
js实现简单模态框实例
2018/11/16 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python re模块介绍
2014/11/30 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
python-地图可视化组件folium的操作
2020/12/14 Python
大二学期个人自我评价
2014/01/13 职场文书
八年级物理教学反思
2014/01/19 职场文书
自荐信格式简述
2014/01/25 职场文书
学校端午节活动方案
2014/08/23 职场文书
财务部会计岗位职责
2015/02/03 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Python学习之异常中的finally使用详解
2022/03/16 Python
Python函数对象与闭包函数
2022/04/13 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers