Javascript 通过滚动到页面的不同部分来更改导航

我希望我的网页导航工作如下：

当您在页面上滚动时，导航链接也会发生变化

以下是如何设置我的导航：

 <nav>
    <ul class="navigation">
        <li>
            <a href="#home" class="smoothScroll">

                <span class="label-nav">
                    Home
                </span>
            </a>
        </li>
        <li>
            <a href="#aboutus" class="smoothScroll">

                <span class="label-nav">
                    About Us
                </span>
            </a>
        </li>
        <li>
            <a href="#families" class="smoothScroll">

                <span class="label-nav">
                    Families
                </span>
            </a>
        </li>
        <li>
            <a href="#contact" class="smoothScroll">
                <span class="label-nav" >
                    Contact
                </span>
            </a>
        </li>
    </ul>
</nav>

单击我的导航可以正常工作，但当我滚动到页面的该部分时，我需要获得一个.visted来工作

下面是我的导航的粘滞菜单的一些代码：

 function stickyMenu() {

    $(window).scroll(function () {
        if ($(window).scrollTop() > 35) {
            $('#header').addClass('sticky-header');
            $('.sticky-navigation,#to-top-button').fadeIn();

            if ($(this).scrollTop() < $('section[data-anchor="home"]').offset().top) {
                $('nav a').removeClass('active');
            }

            if ($(this).scrollTop() >= $('section[data-anchor="home"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(0)').addClass('active');
            }

            if ($(this).scrollTop() >= $('section[data-anchor="aboutus"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(1)').addClass('active');
            }
            if ($(this).scrollTop() >= $('section[data-anchor="families"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(2)').addClass('active');
            }
            if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(3)').addClass('active');
            }

        }
        else {
            $('#header').removeClass('sticky-header');
            $('.sticky-navigation,#to-top-button').fadeOut();
        }
    });
}

<div id="content">
<section id ="about" data-anchor="about">

功能粘滞菜单（）{
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>35）{
$（'#header'）.addClass（'sticky-header'）；
$（'.sticky导航，#到顶部按钮'）.fadeIn（）；
if（$（this）.scrollTop（）<$（'section[data-anchor=“home”]”）偏移量（）.top）{
$（'nav a'）。removeClass（'active'）；
}
if（$（this）.scrollTop（）>=$（'section[data-anchor=“home”]”）偏移量（）.top）{
$（'nav a'）。removeClass（'active'）；
$（'NAVA:eq（0）'）.addClass（'active'）；
}
if（$（this）.scrollTop（）>=$（'section[data-anchor=“aboutus”]”）的.offset（）.top）{
$（'nav a'）。removeClass（'active'）；
$（'NAVA:eq（1）'）.addClass（'active'）；
}
if（$（this）.scrollTop（）>=$（'section[data-anchor=“families”]”）偏移量（）.top）{
$（'nav a'）。removeClass（'active'）；
$（'NAVA:eq（2）'）.addClass（'active'）；
}
if（$（this）.scrollTop（）>=$（'section[data-anchor=“contact”]”）偏移量（）.top）{
$（'nav a'）。removeClass（'active'）；
$（'NAVA:eq（3）'）.addClass（'active'）；
}
}
否则{
$（'#header'）.removeClass（'sticky-header'）；
$（'.sticky导航，#到顶部按钮'）.fadeOut（）；
}
});
}

我设置了每个部分，并为导航的每个部分执行了以下操作：

 function stickyMenu() {

    $(window).scroll(function () {
        if ($(window).scrollTop() > 35) {
            $('#header').addClass('sticky-header');
            $('.sticky-navigation,#to-top-button').fadeIn();

            if ($(this).scrollTop() < $('section[data-anchor="home"]').offset().top) {
                $('nav a').removeClass('active');
            }

            if ($(this).scrollTop() >= $('section[data-anchor="home"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(0)').addClass('active');
            }

            if ($(this).scrollTop() >= $('section[data-anchor="aboutus"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(1)').addClass('active');
            }
            if ($(this).scrollTop() >= $('section[data-anchor="families"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(2)').addClass('active');
            }
            if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(3)').addClass('active');
            }

        }
        else {
            $('#header').removeClass('sticky-header');
            $('.sticky-navigation,#to-top-button').fadeOut();
        }
    });
}

<div id="content">
<section id ="about" data-anchor="about">

---

任何帮助都将不胜感激，因为我在学习js和jquery的同时也在学习html。给我指出某些需要修复的文件，这样我就可以解决这个问题，这也将是一个很大的帮助

您需要实现，这样窗口就会知道哪些元素是可见的，然后可以应用适当的类进行样式设置。

好了，您就快到了。只需将.visted类设置为当前在视口中的页面部分的菜单项。你现在还不明白什么？@koenpeters你能给我看看吗？不知道怎么做。我下载了js文件并将其放在相应的文件夹中。根据我在说明中看到的内容，我在头部设置了脚本来调用该文件。代码非常吓人，所以我需要在js文件中做什么更改才能使其适合我的文件？