CSS導航欄是構建網站時必不可少的元素之一。在設計導航欄時，樣式和交互性是至關重要的。有一種特定的交互性是，在滾動網頁時，導航欄跟隨滾動并變色。這種效果增加了用戶對網站的交互感和視覺吸引力，因此被廣泛使用。

nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
transition: all 0.3s ease-in-out;
}
nav.scrolled {
background-color: #333;
}
window.addEventListener("scroll", function() {
var nav = document.querySelector("nav");
nav.classList.toggle("scrolled", window.scrollY > 0);
});

以上代碼使用了CSS3的transition和JavaScript的scroll事件來實現導航欄的滾動變色。首先，給導航欄一個固定的位置，并在原始狀態下將背景顏色設置為透明。設置transition是為了讓導航欄在顏色變化時有一個平滑的動畫效果。

接下來，我們需要通過JavaScript來監聽用戶的滾動動作。scroll事件會在用戶滾動網頁時觸發。在這個事件處理函數中，我們獲取導航欄的元素，并為其切換一個名為“scrolled”的類。這個類的作用是將導航欄的背景顏色變為一種指定的顏色。classList.toggle()方法是用來在類之間切換的，它可以幫助我們非常方便地切換類。

這樣，我們就成功實現了導航欄滾動變色的效果。你可以按照自己的需要進行調整，包括顏色和動畫過渡時間等。希望這篇文章能對你有所幫助，讓你的網站更加出色！