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下IE与FF兼容函数收集
Sep 17 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
js tab效果的实现代码
Dec 26 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue-resourc发起异步请求的方法
Feb 11 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
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
js实现表格数据搜索
2020/08/09 Javascript
Python内置数据类型详解
2014/08/18 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Django异步任务线程池实现原理
2019/12/17 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
矫正人员思想汇报
2014/01/08 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
保密承诺书范文
2014/03/27 职场文书
产假请假条
2014/04/10 职场文书
学生保证书范文
2014/04/28 职场文书
玄武湖导游词
2015/02/05 职场文书
聘任证明怎么写
2015/03/02 职场文书