為什麼需要跟隨側邊欄？

長文頁面（如部落格文章、文檔、電商詳情）側邊欄內容有限，用戶向下滾動後側邊區域大量留白。固定側邊欄跟隨視窗滾動，能持續曝光關鍵模組（相關推薦、廣告、目錄導航、社群入口），顯著降低跳出率、提升轉化與頁面停留時長。

核心實現邏輯

結合 CSS `position: fixed` 與 JS 滾動事件監聽：
1. 記錄側邊欄初始位置（相對文檔頂部的 offsetTop）
2. 監聽 `window.onscroll`，獲取當前滾動距離 `scrollTop`
3. 當 `scrollTop > 初始位置` 時，給側邊欄添加 `.fixed` 類（`position: fixed; top: 0`）
4. 反之移除類名，恢復靜態定位

完整代碼實現

HTML 結構

<div id="box">
  <div id="float" class="div1">側邊欄內容</div>
</div>

CSS 樣式

/* 容器 */
#box { float: left; position: relative; width: 250px; }

/* 靜態狀態 */
.div1 { width: 250px; }

/* 固定跟隨狀態 */
.div2 {
  position: fixed;
  _position: absolute; /* IE6 hack */
  top: 0;
  z-index: 250;
}

注意：請根據實際側邊欄寬度修改 `width` 值。

JavaScript 邏輯（放入獨立 .js 檔案）

// 側欄跟隨
(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 type="text/javascript" src="your-path/util.js"></script>

關鍵細節與避坑指南

• 初始位置計算：使用 `offsetTop` 遞歸累加至 `offsetParent` 為 null，確保在嵌套佈局中也能準確獲取絕對位置。
• IE6 兼容：IE6 不支援 `position: fixed`，代碼中通過 `_position: absolute` + JS 動態更新 `top` 模擬固定效果（現代項目通常可捨棄）。
• 性能優化：滾動事件高頻觸發，建議加防抖/節流（如 `requestAnimationFrame` 或 `setTimeout` 200ms），避免主線程阻塞。
• 邊界處理：當頁腳區域較高時，固定側邊欄可能遮擋頁腳內容。進階方案：計算頁腳位置，滾動至頁腳前解除 fixed，改為 `absolute` 定位在頁腳上方。
• 響應式適配：移動端側邊欄通常收納為抽屉/底部欄，不適用固定跟隨，需配合媒體查詢禁用該行為。

進階替代方案：CSS `position: sticky`

現代瀏覽器已廣泛支援 `position: sticky; top: 0;`，**零 JS 即可實現跟隨效果**，性能更優、代碼更簡潔。僅需在容器設定 `overflow: visible` 並確保無祖先元素設定 `overflow: hidden/auto/scroll`。建議作為首選，JS 方案作為降級備案。

總結

側邊欄跟隨是提升長頁面側欄利用率的經典模式。理解「記錄初始位置 + 滾動判斷 + 類名切換」的核心邏輯，配合現代 `sticky` 定位，即能輕鬆落地並應對各種邊界場景。