實現WordPress博客側邊欄廣告跟隨固定浮動效果的方法

  • 8
  • 13,517 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

                    @米粒在線 這是側邊廣告代碼。