实现随滚动条滚动效果的两个版本jQuery代码
作者:xlnxin发布时间:2021-04-15分类:WordPress教程浏览:575
导读:修改了侧栏的显示模式,使用随滚动条滚动效果,避孕由于内容较多侧边空的现象,可以说有效地提高了用户体验吧。实现使用的是IM路人提供的jQuery代码,此前大前端博客也提供了...
修改了侧栏的显示模式,使用随滚动条滚动效果,避孕由于内容较多侧边空的现象,可以说有效地提高了用户体验吧。实现使用的是IM路人提供的jQuery代码,此前大前端博客也提供了两段相关的jQuery代码,分别是《jQuery 随滚动条滚动效果 (固定版)》和《jQuery 随滚动条滚动效果 (适用于内容页长文章)》,为了方便以后使用,将其转摘过来。
适用于内容页长文章的jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //侧栏随动 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); } }); |
固定版的jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"></div>'); var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(); objWindow.scroll(function() { if (objWindow.scrollTop() > offset.top){ if(rollBox.html(null)){ rollSet.clone().prependTo('.da_rollbox'); } rollBox.show().stop().animate({top:0,paddingTop:15},400); } else { rollBox.hide().stop().animate({top:0},400); } }); |
不支持IE6,已有完整注释,根据需求添加模块class或者id的,使用方法可参考:实现wordpress随滚动条固定滚动效果
代码摘自:
http://www.daqianduan.com/jquery-roll-fixed/
http://www.daqianduan.com/jquery-roll/
- WordPress教程排行
- 最近发表