滾動導航欄時更改活動列表

Question

我試圖讓我的導航欄在部分之間移動，我會向下滾動。

我試圖用 JS 讓它工作，但我不能讓它工作它是當我用事件監聽器點擊時改變活動類但是當我滾動時我不能讓它工作

謝謝你的幫助

這是我的 js 代碼

let section = document.querySelectorAll('section')
let lists = document.querySelectorAll('.list');
function activeLink(){
    lists.forEach((item) =>
    item.classList.remove('active'));
    this.classList.add('active');
}
lists.forEach((item) =>
item.addEventListener('click',activeLink));

window.onscroll = () =>{
  section.forEach(sec =>{
    let top = window.scrollY;
    let offset = sec.offsetTop;
    let height = sec.offsetHeight;
    let id = sec.getAttribute('id');

    if(top >= offset && top < offset + height){
      lists.forEach(sec =>{
        activeLink;
      })
    }
  })
};

這是我的 html

<nav class="navigation">
        <ul>
            <li class="list active">
                <a href="#home">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">Home</span>
                </a>
            </li>
            <li class="list">
                <a href="#about">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                    <span class="title">About Me</span>
                </a>
            </li>
            <li class="list">
                <a href="#working">
                    <span class="icon">
                        <ion-icon name="newspaper-outline"></ion-icon>
                    </span>
                    <span class="title">Working</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="code-slash-outline"></ion-icon>
                    </span>
                    <span class="title">Learned</span>
                </a>
            </li>
            <li class="list">
                <a href="#contact">
                    <span class="icon">
                        <ion-icon name="chatbox-outline"></ion-icon>
                    </span>
                    <span class="title">Contact</span>
                </a>
            </li>
        </ul>
    </nav>

Answer 1

您的代碼的第一個問題是您沒有正確調用“activeLink”函數。

 if(top >= offset && top < offset + height){
  lists.forEach(sec =>{
    activeLink;
  })
}

如果您添加括號，那么它將起作用並由於“this”關鍵字在這種情況下指代 window 對象而引發錯誤。

要工作，在“onScroll”處理程序中，您可以用以下代碼替換您的代碼：

if (top >= offset && top < offset + height) {
    lists.forEach((item) => {
        item.classList.remove('active');
        if(item.querySelector('a').getAttribute('href') == '#' + id){
            item.classList.add('active');
        }
     });            
}

當然，您的目標不是復制您的代碼。 所以，我們可以先這樣選擇目標：

const target = document.querySelector(`[href='#${id}']`).parentElement;
activeLink(target);

將它直接傳遞給“activeLink”函數將引導您檢查即將到來的參數是“單擊事件”還是列表項，並處理這兩種情況。 相反，您可以像這樣編輯處理程序代碼：

lists.forEach((item) =>
  item.addEventListener('click', function(){
     activeLink(this);
  }));

這是最終狀態下的“activeLink”函數代碼：

function activeLink(li) {
    lists.forEach((item) => item.classList.remove('active'));
    li.classList.add('active');
}

這是用於此的代碼片段：

 let section = document.querySelectorAll('section'); let lists = document.querySelectorAll('.list'); function activeLink(li) { lists.forEach((item) => item.classList.remove('active')); li.classList.add('active'); } lists.forEach((item) => item.addEventListener('click', function(){ activeLink(this); })); window.onscroll = () => { section.forEach(sec => { let top = window.scrollY; let offset = sec.offsetTop; let height = sec.offsetHeight; let id = sec.getAttribute('id'); if (top >= offset && top < offset + height) { const target = document.querySelector(`[href='#${id}']`).parentElement; activeLink(target); } }) };

 .sec { height: 500px; } nav { position: fixed; width: 100%; top: 0; left: 0; z-index: 10; background-color: #fff; } .active a { color: palevioletred; }

 <nav class="navigation"> <ul> <li class="list active"> <a href="#home"> <span class="icon"> <ion-icon name="home-outline"></ion-icon> </span> <span class="title">Home</span> </a> </li> <li class="list"> <a href="#about"> <span class="icon"> <ion-icon name="person-outline"></ion-icon> </span> <span class="title">About Me</span> </a> </li> <li class="list"> <a href="#working"> <span class="icon"> <ion-icon name="newspaper-outline"></ion-icon> </span> <span class="title">Working</span> </a> </li> <li class="list"> <a href="#Learned"> <span class="icon"> <ion-icon name="code-slash-outline"></ion-icon> </span> <span class="title">Learned</span> </a> </li> <li class="list"> <a href="#contact"> <span class="icon"> <ion-icon name="chatbox-outline"></ion-icon> </span> <span class="title">Contact</span> </a> </li> </ul> </nav> <section class="sec" style="background-color: beige;" id="home"></section> <section class="sec" style="background-color: yellow;" id="about"></section> <section class="sec" style="background-color: orange;" id="working"></section> <section class="sec" style="background-color: orangered;" id="Learned"></section> <section class="sec" style="background-color: olive;" id="contact"></section>