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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
js form action动态修改方法
Nov 04 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
原生javascript获取元素样式
Dec 31 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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 强制下载文件代码
2010/10/24 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Django实现自定义404,500页面教程
2017/03/26 Python
python实现猜数字小游戏
2020/03/24 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python元组常见操作示例
2019/02/19 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
公司接待方案
2014/03/08 职场文书
5s推行计划书
2014/05/06 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
给校长的一封检讨书
2014/09/20 职场文书
十岁生日答谢词
2015/01/05 职场文书
政工师工作总结2015
2015/05/26 职场文书
同意转租证明
2015/06/24 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python