讓 Blogger 側邊欄跟隨頁面捲動
為了充分利用每一吋網頁空間，許多站長會在側邊欄加上標籤與文章連結，讓熱門網頁帶動冷門文章的流量。不過當使用者往下捲動網站時，側欄小工具往往會消失，使得兩邊呈現空白狀態。習習翠維尼
這篇文章中，流浪貓將教各位製作跟隨網頁滾動的浮動式側邊欄小工具。
安裝程式碼
版面配置 > 新增小工具 > HTML/JavaScript，輸入以下程式碼和修改小工具 ID。後者可以在主題 > 自訂 > 編輯 HTML頁面中，以「名稱」或 「widget id」來找到正確的 ID 編號。
<script>
bsfloatingwidget("widget ID"); // 小工具的 ID
function bsfloatingwidget(elem) {
var bsfloat = document.getElementById(elem);
var scrollee = document.createElement("div");
bsfloat.parentNode.insertBefore(scrollee, bsfloat);
var width = bsfloat.offsetWidth;
var iniClass = bsfloat.className + ' bsfloat';
window.addEventListener('scroll', bsfloating, false);
function bsfloating() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bsfloat.className = iniClass + ' bsfloating';
bsfloat.style.width = width + "px";
} else {
bsfloat.className = iniClass;
}
}
}
</script>
<style>
.bsfloating {position:fixed; top:0; z-index:9999; box-shadow:10px 10px 4px -5px rgba(0,0,0,0.3);}
</style>
延伸閱讀
留言