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 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
javascript中scrollTop详解
Apr 13 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Vue动态实现评分效果
May 24 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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 常用字符串函数总结
2008/03/15 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
javascript常用函数(2)
2015/11/05 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年车间工作总结
2014/11/21 职场文书
中学生思想品德评语
2014/12/31 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python