navigation changes by scrolling to different sections of the page

Question

I want my webpage navigation to work like this: example web page

As you scroll on the page, the navigation link changes as well.

Here is how my navigation is setup:

 <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>

Smooth scrolling works on my site. I can click on each navigation link and it animates to that section of the page by help of the smoothScroll.js

I set this to my css:

a.visited{
  font: #fff;
  background-color: #3498db;
}

Clicking my navigation works fine, but I need to get a.visted to work when i scroll to that section of the page.

Here is some code for the stickyMenu for my navigation:

 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();
        }
    });
}

I set up each section as such, and did this for each section of the navigation:

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

any help would be appreciate, as I am learning js and jquery as I am learning html. Pointing me to certain files that need fixing so I can solve this would also be a great help!

Answer 1

您需要实现Scrollspy ，因此窗口将知道可见的元素，然后可以将适当的类应用于样式。