今天分享一个小功能,侧边栏随滚动条上下滚动,始终固定在一个位置的功能,现在很多网站和博客都有这个功能,部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告。分享这段有jQuery实现的功能吧,很简单的。
jQuery代码:
$(function(){$(function() {
// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改
var offset = $(‘#sidebar-tab’).offset();
$(window).scroll(function () {
// 检查对象的顶部是否在游览器可见的范围内
var scrollTop = $(window).scrollTop();
if (offset.top < scrollTop) $(‘#sidebar-tab’).addClass(‘fixed’);
else $(‘#sidebar-tab’).removeClass(‘fixed’);
});
});
})
var offset = $(‘#sidebar-tab’).offset();
$(window).scroll(function () {
// 检查对象的顶部是否在游览器可见的范围内
var scrollTop = $(window).scrollTop();
if (offset.top < scrollTop) $(‘#sidebar-tab’).addClass(‘fixed’);
else $(‘#sidebar-tab’).removeClass(‘fixed’);
});
});
})
注:fixed为一个css类
.fixed {
position:fixed; top:20px;
}(IE6就不鸟他了)
就是当在一定位置出现回到顶部的代码…懂了
@heson 嘿嘿
就是样子
文章写得很好,谢谢分享
@盐焗香
不客气
谢谢博主分享了 小白穴道了
@北京人像写真 不客气哈!
这个功能不错。
我一直相加,挺实用的。
谢谢分享。
@天长地久 不客气,你的头像好幸福哈!
这个用作ADS不错的说。
呵呵。陈浩大哥。这个fix ie6不兼容。不过也可以解决。好像用到expression。不过wordpress也不支持ie6。。。

好像是:_position:absolute。
_top:expression(定位的算式)。
ie6的原理就是通过计算来定位。我忘记了是不是这样。具体你自己查查。
嘿嘿,这个问题确实是要css表达式进行解决,不过css表达式要影响性能,为了ie6,我觉得不值得,坚决抵制ie6,让它早点挂吧。
_position:absolute;
_top:expression(documentElement.scrollTop + “px”);
看见博主的介绍,很喜欢你这样的人
很好,终于搜到相关的内容了.不过需要再学习下这个脚本.
嘿嘿,不客气哈!
我的侧边栏肿么就固定不了
为什么我弄了没反应呢?
是要创建一个js文件,然后再head.php中调用吗?