今日課程大綱

• 大綱

1、Side Bar with Progress

在這個部分我們要實作的內容是讓導覽列可以根據我們現在畫面所在的區塊顯示提醒，例如下圖：

現在畫面在 About，導覽列上 About 的部分就會出現底線。要完成這個功能，我們可以先設定好底線樣式、動畫，再加入 EventListener 監聽現在滑到哪個區塊。

設定底線樣式

首先我們先設定好底線的樣式。這邊我們使用的方法是透過 ::after 來在 .nav-item a 下方加上底線，並使用 position: absolute 來定位。

.nav-item {
    position: relative;
}

.nav-item a {
    /* ... */
    display: block;
    padding-bottom: 5px;
}

.nav-item a.active::after {
    content: "";
    position: absolute;
    bottom: 0; /* 距離父元素底部 0px */
    left: 0;   /* 距離父元素左邊 0px */
    right: 0;  /* 距離父元素右邊 0px */
    height: 2px;
    background-color: black;
}

使用 position: absolute 定位時，它會尋找最近的已定位父元素（position 不是 static 的元素），並相對於那個父元素定位。因此如果沒有設定 .nav-item { position: relative; }，就會變成：

.nav-item（position: static，預設值）
  └── a（position: static）
      └── ::after（position: absolute）← 會往上找到 nav 或甚至 body 來定位

設定動畫效果

這部分我們可以使用 Lecture 6 教到的 @keyframe + animation 來進行設定，讓底線出現有平滑的動畫效果。練習看看！

.nav-item a.active::after {
    /* ... */
    animation: /* ... */;
}

@keyframes slideIn {
    from {
        /* ... */
    }
    to {
        /* ... */
    }
}

• 答案

加入 EventListener

最後我們加入 EventListener 來監聽現在滑到哪個區塊並改變樣式。

<aside> 📌

sectionTop：section 距離頁面頂部的距離

window.scrollY：使用者目前捲動到的位置（從整個網頁的最頂部，到目前螢幕可見區域最上方的距離）

</aside>