CSS滾動固定div是一種常見的網頁設計技巧，能夠讓網站更加友好，同時提供更好的用戶體驗。在這篇文章中，我們將介紹如何使用CSS滾動固定div。

首先，我們需要創建一個包含所有內容的div，并使用CSS將其固定在頁面頂部。這可以通過使用“position: fixed”來實現。

<div class="header" style="position: fixed; top: 0; left: 0;">
<p>這里是網站的頭部內容</p>
</div>

上面的代碼將創建一個名為“header”的div，該div將固定在頁面的頂部，并且不會隨著頁面滾動而移動。要使此div在滾動時保持在頂部位置，我們必須添加一些額外的CSS。

.header {
width: 100%;
background-color: #fff;
z-index: 100;
}
.header.fixed {
position: fixed;
top: 0;
}

上面的CSS將使帶有“header”類的div具有新的樣式，使其在滾動時保持在相同的位置。z-index屬性用于使該div處于頁面的最前面，從而確保它始終在頁面的頂部。

為了實現滾動固定效果，我們需要使用JavaScript來檢測滾動事件，并相應地添加或刪除“fixed”類。例如：

$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= 100) {
$('.header').addClass('fixed');
} else {
$('.header').removeClass('fixed');
}
});

上面的JavaScript代碼使用了jQuery庫來檢測窗口滾動事件。如果頁面滾動超過100像素，它將添加“fixed”類，使頭部固定在頁面的頂部。否則，它將從頭部刪除“fixed”類，使其返回其原始位置。

綜上所述，CSS滾動固定div是一種非常實用的技巧，可以提高網站的用戶體驗。使用上述方法，您可以輕松地創建滾動固定div，使其在頁面滾動時保持在頁面的頂部位置。