实现WordPress博客侧边栏广告跟随固定浮动效果的方法

  • 8
  • 12,499 views
  • A+

 

之前谈过 关于jQuery实现侧边栏随窗口滚动,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样式。


 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:8   其中:访客  8   博主  0

    • avatar NameDomain 1

      看了头晕 我还是用插件简单些 :???:

      • avatar 米弟 0

        这代码先前在一模板上测试了可以用,但换了一模板后再添加就不行了。也不知道是啥原因。

          • avatar 米粒 4

            @米弟 @米弟 : 你仔细查看下,可能其他模板缺少某些元素。

          • avatar 智享互联 0

            这个功能找了好久,就这个碰巧能用,还有点小问题!

              • avatar 米粒在线 7

                @智享互联 @智享互联 : 有什么问题呢?其实这个功能有时候也不好,开始弄了一段时间,后来我又去掉弄这个了。因为手机浏览直接遮盖了内容了。 :mrgreen:

              • avatar 米粒在线 4



                  • avatar 米粒在线 4

                    @米粒在线 这是侧边广告代码。