在網頁設計中，有時候我們會需要隱藏導航欄。比如當用戶滾動到頁面底部，我們希望導航欄慢慢隱藏起來，以讓用戶更好地瀏覽頁面，同時也不會影響用戶的視覺體驗。下面介紹一下如何使用CSS隱藏導航欄。

.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: top 0.3s;
}
.navbar-hidden {
top: -60px;
}

首先，在HTML中，我們需要有一個導航欄的標簽，一般情況下是一個div或者nav標簽。然后，在CSS中，通過設置其position為fixed，就可以讓導航欄在頁面滾動時保持在頂部，不隨頁面滾動而移動。同時，我們還需要設置一個z-index屬性來確保導航欄所在的層級高于其他元素。

接下來，我們使用CSS的transition屬性，將導航欄的top屬性動態修改，以實現導航欄的隱藏和顯示。在初始狀態下，導航欄的top屬性為0，顯示在頁面頂部。當用戶滾動到頁面底部時，我們將通過JS代碼添加一個navbar-hidden類到導航欄上，使其top屬性變為負值，導航欄隱藏起來。同時我們也可以通過JS代碼，移除navbar-hidden類，讓導航欄重新顯示。

這樣就完成了導航欄的隱藏和顯示效果。可以根據實際情況，自定義導航欄的樣式和動畫效果，以讓用戶體驗更加流暢和友好。