侧边栏跟随滚动

当一篇文章比较长时，为了获得跟好的用户体验，我们就会考虑，如何为自己的博客设置一个跟随文章滚动的侧边栏，这样还可以使需要推崇的内容得到跟多关注，尤其对于广告展示来说，不失为增加广告展示盒点击量的一个好方法。

首先，我们需要引入jQuery，可以下载最新的jQuery或是直接引用google的API.

本地引入<script type="text/javascript" src="jQuery路径"></script>

调用google

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

然后可以在footer中引入以下代码：

<?php wp_reset_query(); if (is_singular()) : ?> <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)); }); };//绑定 $("侧边栏容器名，如#ad/.ad").smartFloat(); // ]]></script> <?php endif; ?>

最后只需用设定的容器名包住需要跟随滚动的边栏就ok啦。如本例：

<div id="ad"/class="ad"> <h3>边栏跟随</h3> 广告代码 </div>