滚动导航栏时更改活动列表

Question

我正在尝试让我的导航栏在各部分之间移动，我是否会向下滚动。

我尝试用 JS 实现，但无法实现当我点击事件侦听器时它会更改活动 class 但当我滚动时我无法使其工作

感谢您的帮助

这是我的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;
  })
}

如果您添加括号，那么它将起作用并由于在本例中引用 window 对象的“this”关键字而抛出错误。

要工作，在“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');
        }
     });            
}

当然，您的目标是不重复您的代码。所以，我们可以先 select 这样的目标：

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>

滚动导航栏时更改活动列表

change the active list when scrolling navbar

javascript

frontend

nav

onscroll

navbar