实现WordPress博客侧边栏广告跟随固定浮动效果的方法
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果，例如淘宝网的搜索结果页的排序水平条，在默认状态下，滚动条跟随页面滚动。随着页面向下滚动，当此水平条接触浏览器的上边缘时，水平条独立出来，不跟随滚动条滚动了。
具体效果大家可以看我博客文章页侧边栏最下边那两个广告，大家把页面往下拉，当这两个广告的最上沿接触到浏览器的上边缘时，这两个广告就不在网上滚动了，而是保持固定，一直显示在侧边栏，直到你一直拉到页面最底部。这样有两个好处，第一，有时候文章太长了，而侧边栏太短，往下拉的时候，侧边栏一直是空空如也，不美观；第二，我设置两个广告一直显示在侧边栏，这样有利于广告的展现，有利于提高广告的点击率。
起初我博客侧边栏广告启用的是滚动效果，就是随着页面的往下拉，广告有个滚动的效果，不是固定不动的。后来我感觉这样不太友好，因为有个滚动动作的话，在人们注意看文章的时候，显得有点喧宾夺主了。所以现在改成固定漂浮的了，下面把设置方法向大家详细介绍：
第一步：引入jquery.min.js，如果已经引入，则不必重复引入。在主题header.php文件中添加如下代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
第二步：在<body>标记前加入如下代码，推荐加在主题footer.php文件<body>标记前。
<script type="text/javascript">// <![CDATA[
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#float").smartFloat();
// ]]></script>
第三步：打开主题侧边栏文件，一般为sidebar.php，把你想要跟随浮动的层添加id=float属性，大家可以参考如下代码：
<div id="float" class="float">
<h3>博主推荐</h3>
广告代码
</div>
如果大家需要修改广告层的显示样式，可自行修改层的CSS样式，在此不详细叙述。