如何根據頁面中的 position 更改導航欄鏈接的顏色（滾動）？

Question

我正在嘗試基於滾動 position 更改粘性導航欄的鏈接顏色，類似於此引導站點，但不使用引導程序： https://startbootstrap.com/previews/scrolling-nav

我有一個粘性導航欄，一旦我向下滾動它就會彈出，但是當在頁面的最頂部時，主頁背景圖像的頂部只有文字。 這是我到目前為止編寫的一些代碼。 我不確定 html 和 css 是否是必要的，但為了清楚起見，我會發布一些

<header>
       <nav class="nav-bar">
            <a href="#" class="logo">Logo</a>
                <div class="nav-menu">
                    <ul class="nav-list">
                        <li class="nav-item">
                            <a href="#home" class="nav-link active-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#about" class="nav-link">About</a>
                        </li>

.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    padding: 20px 100px;
    z-index: 10;
}
.nav-bar.sticky {
    padding: 5px 100px;
    background: $blue_purple;
    border-bottom: 1px solid $black;
}
.nav-bar.sticky .logo {
    color: $white;
    font-size: 1.5em;
}
.nav-bar.sticky ul li a {
    color: #fff;
    font-size: .85em;
}

window.addEventListener("scroll", function(){
    var nav_bar = document.querySelector(".nav-bar");
    nav_bar.classList.toggle("sticky", window.scrollY > 0);
})

const sections = document.querySelectorAll('section[id]');

console.log(sections);

function positionIndicator(){
    const scrollY = window.pageYOffset;

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight;
        const sectionTop = current.offsetTop - 50;
        sectionId = current.getAttribute("id");
        console.log(sectionId);

        if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
            document.querySelector(".nav-bar a[href*=" + sectionId + "]").classList.add("active-link");
            //document.querySelector(".nav-bar.sticky a[href*=" + sectionId + "]").classList.add("active-link");
        } else { 
            document.querySelector(".nav-bar a[href*=" + sectionId + "]").classList.remove("active-link");
            //document.querySelector(".nav-bar.sticky a[href*=" + sectionId + "]").classList.remove("active-link");
        }
    })
}

window.addEventListener("scroll", positionIndicator);

頂部的 function 是滾動后彈出導航欄，我嘗試為 position 實現一些東西，但是注釋掉的行的 classList 調用返回 Z37A6259CC0C1DAE299A786 的 querySelector 調用我不確定的 6489 格式粘性導航欄，而不是位於頁面頂部的導航欄。 active-link 只是與粘性導航欄上的原始白色不同的顏色。

Answer 1

它很長，但基本上：

1. 您可以通過將當前 position 與每個部分的 offsetTop 進行比較來檢查您在頁面上的位置
2. (so scrolling does the same thing as clicking the link)使用 window.history.replaceState 將當前部分 id 添加到 （因此滾動與單擊鏈接的作用相同）
3. 並將 url 與您的鏈接進行比較，如下所示：window.location.hash === "#work-section" 等。

當您找到匹配項時，只需添加和刪除 class 即可為您的鏈接設置樣式。 As I said the full code is pretty long to post here, so here is a link to my github repository that uses this system: https://github.com/mkubincova/mkubincova.github.io/blob/master/js/main .js