之前談過 關于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樣式。
4F
看了頭暈 我還是用插件簡單些
B1
@ NameDomain @NameDomain : 其實插件多了不好,能折騰還是折騰寫進取。
3F
這代碼先前在一模板上測試了可以用,但換了一模板后再添加就不行了。也不知道是啥原因。
B1
@ 米弟 @米弟 : 你仔細查看下,可能其他模板缺少某些元素。
2F
這個功能找了好久,就這個碰巧能用,還有點小問題!
B1
@ 智享互聯 @智享互聯 : 有什么問題呢?其實這個功能有時候也不好,開始弄了一段時間,后來我又去掉弄這個了。因為手機瀏覽直接遮蓋了內容了。
1F
B1
@ 米粒在線 這是側邊廣告代碼。