<div class="progress-container">
<div class="progress-bar"></div>
</div>

然后，我們需要使用CSS來為進度條添加樣式。首先，我們需要為.progress-container添加背景色，高度和固定定位，以便它始終位于頁面頂部。

.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #ddd;
}

接下來，我們需要為.progress-bar添加動畫效果，使它能夠跟隨用戶的頁面滾動。為此，我們可以使用CSS3的transition屬性。

.progress-bar {
height: 100%;
background-color: #4CAF50;
transition: width 0.5s ease-in-out;
}

最后，我們需要使用JavaScript來獲取當前頁面滾動位置，并將其轉化為一個百分比值，以便我們更新.progress-bar的寬度。

window.onscroll = function() {
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (scroll / height) * 100;
document.querySelector(".progress-bar").style.width = scrolled + "%";
};

總之，通過以上CSS樣式和JS代碼，我們可以輕松地實現一個網頁導航進度效果，讓用戶在瀏覽網站時能夠更加清晰地了解導航的進度和頁面位置。