CSS導航欄吸頂是一種非常實用的網頁設計技巧，可以讓用戶在瀏覽網頁時，始終能夠方便地訪問導航欄，提高用戶體驗。下面我們一起來看看如何通過CSS來實現導航欄吸頂。

/* 第一步：設置導航欄的樣式 */
nav {
background-color: #fff;
height: 50px;
}
/* 第二步：設置吸頂效果的樣式 */
.fixed-nav {
position: fixed; /* 將導航欄固定在屏幕頂部 */
top: 0;
left: 0;
z-index: 999; /* 設置導航欄的層級 */
width: 100%; /* 將導航欄寬度設置為100% */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* 設置陰影效果 */
}
/* 第三步：使用JavaScript實現滾動時導航欄吸頂 */
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
const navTop = nav.offsetTop;
const navHeight = nav.offsetHeight;
if (window.scrollY >= navTop) {
document.body.style.paddingTop = navHeight + 'px'; /* 讓內容占據導航欄的高度 */
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
});

通過上述的CSS樣式和JavaScript代碼，就可以實現導航欄吸頂的效果了。需要注意的是，導航欄在吸頂時會覆蓋網頁的內容，為了讓內容不被覆蓋，需要在JavaScript代碼中計算出導航欄的高度，然后將內容區域的padding-top設置為導航欄的高度。