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 事件冒泡简介及应用
Jan 11 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
innerText 使用示例
Jan 23 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
使用vue构建多页面应用的示例
Oct 22 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/05/24 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
django 信号调度机制详解
2019/07/19 Python
Python configparser模块常用方法解析
2020/05/22 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
JDO的含义
2012/11/17 面试题
捐款倡议书格式范文
2014/05/14 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers