在網頁設計中，導航菜單是一個很重要的組成部分。有時候，我們需要在用戶滾動到網頁的某個位置時，將導航菜單隱藏起來。這時候，我們可以使用CSS來實現這個效果。

首先，在HTML中添加一個導航條的容器，例如：

<nav class="nav">
<ul class="menu">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

接下來，我們可以使用CSS實現導航條在滾動到一定位置后隱藏。例如：

.nav {
position: fixed; /* 設置導航條為固定定位 */
top: 0;
left: 0;
right: 0;
z-index: 999;
transition: all 0.3s ease; /* 添加過渡效果 */
}
.nav.hide {
transform: translateY(-100%); /* 將導航條向上移動 */
}

我們在CSS中添加了一個.nav.hide的樣式，用于隱藏導航條。當用戶滾動頁面時，我們可以使用JavaScript來判斷頁面滾動的位置，然后添加或移除.nav.hide樣式，例如：

window.addEventListener("scroll", function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop >200) {
document.querySelector(".nav").classList.add("hide");
} else {
document.querySelector(".nav").classList.remove("hide");
}
});

這里我們使用了addEventListener來監聽頁面滾動事件，然后判斷頁面滾動的位置，當滾動超過200像素時，添加.hide樣式來隱藏導航條。

最后，我們可以根據自己的需要來調整樣式和JavaScript邏輯，來實現更好的效果。