jquery如何实现随滚动条滚动效果?方法示例

发布时间:2020-10-06编辑:脚本学堂
jquery滚动条效果的例子,在页面中实现随滚动条滚动的效果,对于内容较长的文章,可以用这种方法模拟分页效果,拖动滚动条实现随区块浏览。

jquery实现随滚动条滚动效果(脚本小编整理)

对于内容较长的页面,浏览时网站右侧一直是空白,可以借助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滚动条):
jquery如何实现随滚动条滚动效果