↓ ↓ 請免費贊助本站,只需1秒時間 ↓ ↓

2013/04/13

[教學] 如何在 Blogger 裡使用側邊欄固定滾動(Scroll follow of sidebar)功能?

側邊欄固定滾動(Scroll follow of sidebar)功能[註1],這個功能可以讓某個欄位隨著滑鼠捲軸滾動而固定顯示。

首先,把需要用到的程式碼先準備好。

CSS 程式碼
/*Scroll follow of sidebar*/
#box_float {float:left; position:relative; width:250px;}
.div1 {width:250px;}
.div2 {position:fixed; _position:absolute; top:0; z-index:999;}

HTML 程式碼
其中,如第二個以上的欄位要放置,可將 div1 改為 div2,或是其他名稱,不要有重複即可。
<div id="box_float">
<div id="float" class="div1">
將需要顯示的文字、程式碼等等放在這裡。
</div>
</div>

JavaScript 程式碼
<script type="text/javascript">
//Sidebar Scroll
(function() {
var oDiv = document.getElementById("float");
var H = 0,
iE6;
var Y = oDiv;
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent
};
iE6 = window.ActiveXObject && !window.XMLHttpRequest;
if (!iE6) {
window.onscroll = function() {
var s = document.body.scrollTop || document.documentElement.scrollTop;
if (s > H) {
oDiv.className = "div1 div2";
if (iE6) {
oDiv.style.top = (s - H) + "px";
}
} else {
oDiv.className = "div1";
}
};
}
})();
</script>


使用教學 (以下所有圖片,點選後可放大)
1. 進入管理後台,切換到「範本」,點選「編輯 HTML」。


















2. 將「<b:skin>...</b:skin>」左邊的「」點開











3. 將 CSS 程式碼加入 CSS 區塊後,點選「儲存範本」。我自己是加到 Widgets 區塊中。











4. 回到管理後台,切換到「版面配置」,點選「新增小工具」。











5. 將「HTML 程式碼」和「JavaScript 程式碼」依序填入後,點選「儲存」,「標題」欄可留空。
























要再次強調的是,這只是眾多方法的一種,而這個方法的缺點是,如果你將帶有這個功能的欄位擺在其他欄位之前,在滾動捲軸或滑鼠的時候,可能會蓋到其他欄位,因此使用時需要多加思量版面配置的問題。目前還在研究其他的方法,如果有更好的方式,我會再更新這篇文章,也歡迎有更好方法的人留言分享。

【版權資訊】(引用規定)
作者:ChaoRC
網址:http://www.chaofree.com/2013/04/scroll-follow-of-sidebar.html

備註
[註1] 資料來源


關鍵字:Sidebar scroll follow, 欄位跟著捲軸跑, 欄位跟著滑鼠動

1 則留言:

  1. 請問如果有開啟Blogger幻燈片功能
    就是點圖片會跑出幻燈片那樣子

    會使得div id="float" 裡面的東西跑到最上層
    而蓋到幻燈片 請問要怎麼解決

    回覆刪除

[1] 本站留言區屬於即時顯示,任何留言者之言論不代表本站立場,發表意見前請自行審酌留言內容。本站保留刪除垃圾留言、廣告留言、不當留言及違法言論之權力,若造成不便敬請見諒。

[2] 一旦您於本站發表意見,即視為知悉並同意本站之網站聲明中之各項內容。

[3] 如有在本篇文章留言,建議勾選留言區右下角的「通知我」,以利收到後續回覆通知。

[4] 留言區可以使用HTML標記,例如「< b >, < i >, < a >...」等。