Jquery实现侧边栏跟随滚动条固定(兼容IE6)

2014-04-02 23

部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告。

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文章

jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 32
纯js实现无限空间大小的本地存储
Jun 18 18
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 21
JS HTML5实现拖拽移动列表效果
Aug 27 28
探讨跨域请求资源的几种方式(总结)
Dec 02 23
vue深入解析之render function code详解
Jul 18 18
在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用Ajax技术,页面无刷新效果,废话不多说,直接上代码。
Mar 24 47
手机访问当前页面