WordPress侧边栏随窗口滚动效果实现方法(附JQuery代码)

WordPress侧边栏部分模块随文章滚动条滚动效果,相信很多人有看到过。就是当网页比较长的时候,侧边栏部分模块可以随着滚动条的滚动而滚动。这样当文章或页面的内容比较长的时候,可以在侧边栏显示一些内容,免得给人以左右不平衡的感觉。

这种效果有很多人会用在底部显示广告。需要注意的是,要把实现侧边栏随窗口滚动的效果的代码段放在侧边栏的最下面,如果放在其他代码段的上面,那么位于其下的内容也都会随窗口滚动。

方法一:

wordpress侧边栏滚动实现步骤:

1、找出需要滚动模块的 如 <div class="widget hots">

2、在header.php加载 jquery库,如果已经加载过则可跳过。

此为Google的jq库:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3、两种方式加入代码:

JQuery侧边栏滚动实现代码部分如下:

代码第二行【widget hots】就是需要动的版块。

$(function() {
var $sidebar = $("#widget hots"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() – offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});

1:在header.php里面添加如下代码
<script type="text/javascript" >
jQuery(document).ready(function($) {
$(function() {
var $sidebar = $("#widget hots"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() – offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

2:将代码存为.js文件后在header.php的head标签中添加:

<script src="http://你的域名/文件名.js" type="text/javascript"></script>

方法二:

把下面的代码存为js,挂载在你主题上即可

var rollStart = $(‘.Statistics’), //滚动到此区块的时候开始随动
rollOut = $(‘.WidgetMeta,.Statistics’); //隐藏rollStart之后的区块
rollSet = $(‘.RRPosts,.TagsCloud’); //添加rollStart之前的随动区块
rollStart.before(‘<div class="rollbox" style="position:fixed;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(‘.rollbox’);
}
rollOut.fadeOut();
rollBox.show().stop().animate({top:0,paddingTop:10},400);
} else {
rollOut.fadeIn();
rollBox.hide().stop().animate({top:0},400);
}
});

注意:滚动区域的内容不能太长,不然会出现无限下拉的情况。

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址