CSS 頭部導航欄固定是指在頁面滾動時，導航欄會始終處于頁面的頂部。這種效果可以為用戶帶來更好的體驗，并且能使頁面看起來更加美觀。下面介紹如何實現 CSS 頭部導航欄固定。

/* 以下是 HTML 和 CSS 代碼示例 */
/* HTML 代碼 */
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
/* CSS 代碼 */
.navbar {
position: fixed; /* 使導航欄固定 */
top: 0; /* 將導航欄置于頁面頂部 */
background-color: #333; /* 設置背景色 */
width: 100%; /* 設置導航欄寬度為100% */
}
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

以上代碼示例中，通過設置導航欄為固定定位（position: fixed;）和將導航欄置于頁面頂部（top: 0;），使導航欄固定在頁面頂部。此外，也需要設置導航欄的寬度（width: 100%;）和設置導航欄樣式，如背景色、字體顏色等。

如果想要實現導航欄在頁面滾動到一定高度時才固定，可以使用 JavaScript 監聽頁面滾動事件，當滾動高度大于某個值時，將導航欄的 position 設置為 fixed。如下：

// 通過 JavaScript 監聽頁面滾動事件
window.addEventListener('scroll', function () {
// 獲取頁面滾動高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判斷滾動高度是否大于某個值
if (scrollTop >100) {
// 將導航欄的 position 設置為 fixed
document.querySelector('.navbar').style.position = 'fixed';
} else {
// 將導航欄的 position 設置為 static
document.querySelector('.navbar').style.position = 'static';
}
});

通過 JavaScript 監聽頁面滾動事件，并使用 document.documentElement.scrollTop 或 document.body.scrollTop 獲取頁面滾動高度，再根據需求判斷是否需要將導航欄的 position 設置為 fixed。

CSS 頭部導航欄固定可以使頁面更加美觀，并為用戶帶來更好的體驗。通過設置 CSS 樣式或使用 JavaScript 代碼，都可以實現這種效果。