<div>頂部凍結是一種常見的網頁布局技術，它使得一個元素在滾動頁面時保持在頂部固定不動。通過使用CSS和JavaScript，可以實現頂部凍結效果，提升網頁的用戶體驗。下面將通過幾個代碼案例來詳細解釋說明。</div>
<div>

案例一：使用CSS實現頂部凍結

使用CSS的position屬性可以控制元素的定位。在實現頂部凍結時，可以將元素的position屬性設置為fixed，并設置top屬性為0。這樣，元素將固定在頁面的頂部。

</div>
<div>

<style>
.header {
position: fixed;
top: 0;
width: 100%;
background-color: #f5f5f5;
padding: 10px;
color: #333;
}
</style>
<br>
<div class="header">
<h1>頂部凍結示例</h1>
<p>這是一個頂部凍結的網頁布局示例</p>
</div>

</div>
<div>

在上述代碼中，通過設置.header類的position屬性為fixed，并設置top屬性為0，實現了頂部凍結的效果。在該div元素中，可以添加需要固定在頂部的內容，如標題和菜單欄。

</div>
<div>

案例二：使用JavaScript動態添加CSS樣式

除了使用CSS來實現頂部凍結外，還可以使用JavaScript來實現動態添加CSS樣式的方式。

</div>
<div>

<script>
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
if (window.pageYOffset > 0) {
header.style.position = 'fixed';
header.style.top = '0';
} else {
header.style.position = 'static';
}
});
</script>
<br>
<div class="header">
<h1>頂部凍結示例</h1>
<p>這是一個頂部凍結的網頁布局示例</p>
</div>

</div>
<div>

在上述代碼中，通過監聽頁面的滾動事件，當頁面滾動到一定位置時，使用JavaScript動態地添加CSS樣式。當頁面滾動距離大于0時，設置.header元素的position屬性為fixed，top屬性為0，使其固定在頁面頂部。當頁面滾動距離為0時，將position屬性設置為static，使其恢復正常布局。

</div>
<div>

案例三：使用插件實現頂部凍結

除了自己編寫CSS和JavaScript代碼實現頂部凍結外，還可以使用現成的插件來簡化開發過程。

</div>
<div>

<script src="https://cdn.jsdelivr.net/npm/stickybits"\gt;</script>
<br>
<div class="header">
<h1>頂部凍結示例</h1>
<p>這是一個頂部凍結的網頁布局示例</p>
</div>
<br>
<script>
stickybits('.header');
</script>

</div>
<div>

在上述代碼中，通過引入stickybits插件，并使用stickybits()函數將.header元素傳入，即可實現頂部凍結效果。插件會自動添加所需的CSS樣式和JavaScript代碼，簡化了實現過程。

</div>
<div>

通過以上幾個代碼案例，我們詳細了解了如何實現頂部凍結效果。無論是使用CSS、JavaScript還是插件，都可以達到固定頂部的目的。開發者可以根據具體需求選擇合適的實現方式，提升網頁的用戶體驗。

</div>