如何在固定區域內實現浮動效果：CSS 定位與 JavaScript 協同實現指南

需求分析

在一個大型容器 div 內，左側放置一個隨內容滾動的浮動區塊，右側為固定內容。左側區塊需跟隨右側內容向下滾動，但不能超出外層容器的邊界。這是一個典型的「側邊欄跟隨」場景。

核心思路：拒絕 Float，擁抱 Position

要實現靈活的浮動效果，CSS 必須放棄 float，改用 position: absolute 或 fixed 結合容器的 position: relative。外層容器設定 overflow: hidden 以裁剪超出部分。

關鍵 CSS 結構

.container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.leftDiv { width: 30%; position: absolute; left: 0; top: 0; }
.rightDiv { width: 70%; height: 100%; position: absolute; right: 0; top: 0; }

JavaScript 動態控制邏輯

純 CSS 難以精準控制「不超出邊界」的動態浮動，需引入 JavaScript（或 jQuery）計算位置：

1. 獲取外層容器高度（containerH）與左側浮動層高度（leftH）。
2. 監聽滾動事件或滑鼠位置，計算左側層應有的 top 值。
3. 使用 jQuery.animate() 平滑過渡 top 值。
4. 邊界限制：top 不得小於 0；不得大於 containerH - leftH。

關鍵判斷邏輯

if (leftTop < 0) leftTop = 0;
if (leftTop > containerH - leftH) leftTop = containerH - leftH;
$('#leftDiv').css('top', leftTop);

進階優化建議

• 使用 requestAnimationFrame 替代滾動事件直接操作 DOM，提升性能。
• 考慮 position: sticky（現代瀏覽器支援）作為漸進增強方案，無需 JS 即可實現基礎吸頂效果。
• 若內容高度動態變化，需在內容加載完成後重新計算高度並綁定事件。

掌握「定位層級 + 動態計算 + 邊界裁剪」三步曲，即可輕鬆實現各種複雜的區域浮動效果。