在網站設計中，導航欄是一個非常重要的元素。因為它能夠幫助用戶瀏覽網站，找到他們需要的信息。有些時候，在導航欄懸浮于頁面的頂部可以使用戶更方便快速地訪問導航欄。今天就來學習一下如何使用 CSS 實現這個效果。

首先，我們需要為導航欄創建一個容器。在本例中，我們使用一個 div 元素來包含我們的導航欄。在 CSS 中，我們可以為這個容器設置一個固定的位置，使其在頁面的頂部固定不動。

.nav-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

接下來，我們需要確定什么時候導航欄懸浮。通常，當用戶滾動頁面時，我們希望導航欄懸浮在頁面的頂部。在這里，我們可以使用一個 JavaScript 事件監聽器來檢測頁面滾動事件，并設置導航欄容器的樣式。

document.addEventListener('scroll', function() {
var navContainer = document.querySelector('.nav-container');
if (window.pageYOffset >0) {
navContainer.classList.add('nav-container-fixed');
} else {
navContainer.classList.remove('nav-container-fixed');
}
});

現在，我們在導航欄容器上添加了一個“nav-container-fixed”類，它使導航欄懸浮于頁面頂部。讓我們編寫 CSS 規則來實際實現這個效果。

.nav-container-fixed {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
z-index: 999;
}

最后，讓我們做一些微調，使我們的導航欄更加完美。我們可以添加一些過渡效果，如下所示：

.nav-container {
transition: all 0.2s ease-in-out;
}
.nav-container-fixed {
transition: all 0.2s ease-in-out;
// 添加其他樣式
}

現在，我們的導航欄就會在頁面滾動時懸浮在頁面的頂部了。這里只是一個非常簡單的例子，但你可以通過調整樣式和添加其他效果使其更符合你的設計要求。希望這篇文章能幫助你完成你的網站設計工作！