在網站設計中，導航欄是一個非常重要的組成部分，可以方便用戶快速定位到需要的內容。然而，在網頁滾動時，導航欄可能會隨著滾動而消失。為了解決這個問題，我們可以使用CSS來實現導航欄固定在頁面頂部滾動。
首先，在HTML中創建導航欄的結構：

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

接著，在CSS中為導航欄添加樣式，并設置固定在頁面頂部：

nav {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
padding: 10px;
box-shadow: rgba(0,0,0,0.1) 0px 1px 2px 0px;
}
<br>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
<br>
nav li {
margin: 0 10px;
}
<br>
nav a {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: bold;
padding: 5px;
border-bottom: 2px solid transparent;
}
<br>
nav a:hover {
border-color: #333;
}

在這段代碼中，我們使用了“position: fixed”屬性將導航欄固定在頁面頂部，并設置了頂部距離為0。為了讓導航欄看起來更美觀，我們還為它添加了背景色、陰影效果以及文本樣式等。
最后，我們需要為頁面添加一個“padding-top”屬性，以避免內容被導航欄遮擋：

body {
padding-top: 50px; /* 導航欄高度加上一些額外間距 */
}

通過以上操作，我們已經成功實現了一個固定在頁面頂部的導航欄，并且在用戶滾動頁面時它也會一直顯示在屏幕上方。這樣，用戶可以更方便地瀏覽網站的各個頁面，提高了用戶體驗。