Tutorial

Scrollspy navigation

Automatically update navigation active items by clicking on links or scrolling the page

The "scrollspy" function updates navigation items when the page is scrolled down or up. This function is very useful in conventional websites, but mainly for "one page" websites (landing pages). For this option to work correctly, the navigation bar should be above the other sections that will be affected:

<body>

    <nav id="navigation" class="navigation">
    ...
    </nav>
    
    <section id="home"></section>
    <section id="services"></section>
    <section id="team"></section>
    <section id="portfolio"></section>

</body>

Each navigation link must be an anchor to the corresponding section:

<ul class="navigation-menu">
    <li class="navigation-item is-active">
        <a class="navigation-link" href="#home">Home</a>
    </li>
    <li class="navigation-item">
        <a class="navigation-link" href="#services">Services</a>
    </li>
    ...
</ul>

<section id="home">
...
</section>

<section id="services">
...
</section>

1 - Follow the documentation and set up a navigation bar with a simple menu:

Copy

<nav id="navigation" class="navigation navigation-justified">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">
                NAVIGATION
            </a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">
                    NAVIGATION
                </a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item">
                <a class="navigation-link" href="#home">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#services">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#team">Team</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#portfolio">Portfolio</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

2 - Add the "sticky-top" class to the "nav" element:

Copy

<nav id="navigation" class="navigation navigation-justified sticky-top">
    ...
</nav>

You can use the class "fixed-top" instead "sticky-top".

3 - Set some javacript options:

Copy

var navigation = new Navigation(document.getElementById("navigation"),{
    scrollSpy: true,
    scrollSpyOffset: -60
});

The result (scroll down):

Access the documentation about scrollspy. See the list of tutorials for other ways to modify the navigation bar and add features.