对于内容较长的页面,浏览时网站右侧一直是空白,可以借助jquery滚动条的一个特殊效果,实现内容随区块滚动。
参考:
jquery滚动随动区块:
//侧栏随动
var rollstart = $('.feed-mail'), //滚动到此区块的时候开始随动
rollout = $('.cookie-list'); //隐藏rollstart之后的区块
rollstart.before('<div class="da_rollbox"></div>');
var offset = rollstart.offset(),objwindow = $(window),rollbox = rollstart.prev(),
rollset = $('.search,.weibo,.group'); //添加rollstart之前的随动区块
objwindow.scroll(function() {
if (objwindow.scrolltop() > offset.top){
if(rollbox.html(null)){
rollset.clone().prependto('.da_rollbox');
}
rollout.fadeout();
rollbox.show().stop().animate({margintop: objwindow.scrolltop() - offset.top + 20},400);
} else {
rollout.fadein();
rollbox.hide().stop().animate({margintop:0},400);
}
});
以上代码,只需要写上几个class或者id(最好不要是id,w3c规定id不能重复使用)。
大前端设置的随动区块(jquery滚动条):