JS 固定定位抖動問題：CSS position:fixed 完美替代 JS 計算 scrollTop

現象

用 JS 監聽 window.scroll，實時設定 div.style.top = window.scrollTop 實現固定頂部，滾動時元素閃爍/抖動 (Firefox 正常，Chrome/Edge/IE 抖動)。

根因

• JS 執行異步於瀏覽器渲染管線，滾動事件觸發 → 佈局重排 → JS 讀取 scrollTop → 設置 top → 再次重排，產生「讀寫分離」導致的視覺抖動。
• 瀏覽器合成器 (Compositor) 可直接處理 position: fixed，無需主線程參與，絲滑無抖動。

CSS 完美解決方案

.sticky-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    /* IE6 兼容 Hack (可選) */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}

直接套用 class，零 JS，零抖動，全瀏覽器支持 (IE7+ 完美，IE6 用 Hack)。

現代增強：position: sticky

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10000;
}

sticky 在容器內滾動超出閾值時固定，更靈活，IE 不支持，需降級處理。

為何 JS 方案在 Firefox 正常？

Firefox 事件循環/渲染調度機制不同，恰好掩蓋了時序差；但不代表方案正確，**永遠優先用 CSS 實現佈局/固定定位**。