wordpress主题侧边栏浮动


看了很多的博客在侧边栏的某个模块设置了浮动,效果很不错,特别是对于有广告的网站,大大增加了广告的曝光度。如何实现呢?OK,从网上搜索了一些,在本地搭建的wordpress博客里面测试通过。

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

将这段代码里的4个“XXXX”替换成要浮动的模块的ID。 然后将此段代码完整的添加到主题目录下的header.php文件的<head></head>标签里面就行了。

下面以HotNewsPro主题为例,具体说一下如何实现:比如,我要将“最新评论”模块设置成浮动。那好,找到“最新评论”模块的ID,就是那个class=,文件在…/HotNewspro/includes/widget/r_comments.php文件里面,打开文件看到class=”r_comments”。那么就把上面说的“XXXX”替换成“.r_comments”,注意前面有个点号。代码中的数字“368”可任意调整使其适合你的窗口大小。

注意,浮动的模块高度不能太大,否则会将底部的footer顶下去,在调整是要充分考虑到这一点。

4 Responses Comment (4) Trackback (0)
  1. 张衡Henry :

    之前试过类似的代码,没搞定,有bug。你这个看着不错。我现在不用了,用手机或者pad浏览的时候,很烦人。

    1. SingleX Post author :

      @张衡Henry : 网上很多说的不是很明白,就自己在本地搭建的WAMP环境下测试了。嗯,pad上是很可能出问题的。

      1. Youth.霖 :

        可以用@media规则是移动设备部浮动吗?怎么写呢

发表评论