WordPress主题侧边栏实现随滚动条滑动固定的js特效

最近在制作Wordpress主题,给主题添加了一个侧边栏淘宝客相关产品模块,考虑到如果文章比较长,但侧边栏太短造成侧边栏空白,于是想着让侧边栏实现随滚动条滑动固定的特效。

现在许多web2.0风格的网站都喜欢用“侧边栏实现随滚动条滑动固定的特效”效果,就是当一个页面很长的时候,设定侧边栏内容会跟随滚动条的滑动,而跟着滑动或者固定的效果,这样做非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的),还有适合于广告联盟的展示。所以去网上找了一些资料,整理了一下,现在分享给大家,也方便以后自己查阅,希望对大家有用。

效果一:侧边栏随窗口滚动(滑动效果)

来源:知更鸟
实现这个随窗口滚动效果,首先主题必须加载jQuery。已经完美解决侧边栏会顶着页脚无限滚下去的bug,一起看看代码:

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});
</script>

将上述javascript代码加到主题头部header.php模版中。修改其中的#sidebar为你的主题侧边选择器名称;根据不同的主题头部模版高度,适当调整其中的数字“368”。

效果二:侧边栏固定模块

来源:卢松松博客

Js代码

//侧栏跟随
(function() {
    var oDiv = document.getElementById("float");
    var H = 0,
    iE6;
    var Y = oDiv;
    while (Y) {
        H += Y.offsetTop;
        Y = Y.offsetParent
    };
    iE6 = window.ActiveXObject && !window.XMLHttpRequest;
    if (!iE6) {
        window.onscroll = function() {
            var s = document.body.scrollTop || document.documentElement.scrollTop;
            if (s > H) {
                oDiv.className = "div1 div2";
                if (iE6) {
                    oDiv.style.top = (s - H) + "px";
                }
            } else {
                oDiv.className = "div1";
            }
        };
    }
})();

注:为了减少js文件引用,这段代码可放入任意JS文件中
CSS代码:

/*侧栏跟随*/
#box_float {float:left; position:relative; width:250px;}
.div1 {width:250px;}
.div2 {position:fixed; _position:absolute; top:0; z-index:999;}

注:样式代码仅为参考,具体的调整,请结合自己的网站调整。
HTML代码

<div id="box_float">
  <div id="float" class="div1">
  这里写你网站的代码与标签
  </div>
</div>

注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。wordpress用户把此段代码添加到sidebar.php的侧栏位置即可。
特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。

效果三:添加侧边栏随滚动条滚动效果(无滑动)

来源:自由的风博客
给侧边栏的各个模块加上一些class标志,如下图框框里面的内容:

侧边栏实现随滚动条滑动固定的js特效
如果你的侧边栏之前已经有了这些class标志加以区分,只要使用就可以了,不用另外加。
在主题的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);
	}
});

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

效果四:JQUERY SCROLL FOLLOW

这是一个插件,添加步骤很简单,操作简单就是使用插件的好处,下载压缩包解压到网站目录,然后按照步骤操作即可。但个人不推荐插件,能用代码实现的效果,就不用插件。
插件下载地址:http://kitchen.net-perspective.com/open-source/scroll-follow/
示例页面:
http://kitchen.net-perspective.com/sf-example-1.html
http://kitchen.net-perspective.com/sf-example-2.html
http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html
赶紧去试试看吧,总会有一种效果适合你的。

 
分享到:更多 ()