实现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样式，在此不详细叙述。
你好楼主，很感谢你的代码，同时我是一个WP新手，对HTML只懂一点点，对于上面第三部ID=”FLOAT”这个说的层添加ID=FLOAT属性，请问是直接复制你这段代码粘贴到边栏PHP文件吗？还是说因为我直接粘贴了没有用所以来问问的，希望能指点下谢谢
既然留了代码，却又禁止右键复制
不错学习了很多新知识
早就用上了。
我也使用了,不错的。
这个功能现在用得还是挺多的
不少站点都在使用固定悬浮效果。
大热天，折腾啥啊
现在还没广告，不过这个功能不错哈
对于用户体验来说挺不错的。
这个功能还是相当实用。
不错啊 ，也是程序员
这个功能不错，很多时候都可以用到的。
对于用户体验来说挺不错，许多站点都在使用。
转眼一年已过一半，再次来访，继续支持
这个功能蛮实用的
突然发现贵站不允许选中文本呃。
暂时不支持选择。
很实用 呵呵
效果不错
不太喜欢跟随飘动的广告 哈哈 感觉只要加了这玩意就不太正规
心理作用
这个是固定在右侧的广告，不随着滚动条的滚动而滚动。
恩。还是挺实用的。
少年，还是你更新的勤啊
付出总会有回报的
正好可以用到呢，多谢博主了~
我是看不懂代码的
这个分享很好，对于博客来说很有必要
这就是所谓的对联广告效果吧
固定悬浮，跟对联广告不一样。
百度 搜狗这些都可以直接使用副董效果吧
都可以，只是一个JS效果而已，跟广告没有关系。
悬浮广告是很容易被误点进去的吧。
不会的，主要是为了填充空白。
功能比较强大
前2天听从访客意见，把漂浮的广告给撤了，跟随的换成了百度标签广告。
百度标签广告没用过，不知道怎么样。
悬浮广告，容易被点击，效果应该还是不错的。
主要是为了填充页面的空白。
博主果然很强大啊！
感觉用广告管家还爽点。
广告管家跟页面代码广告是两回事。
没看到漂浮广告啊？
是固定在右侧的广告，广而告知，文章长了就固定在边侧了。