Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 16th, 2016
How to make a onepage menu active on scroll with only JS

When you Google the question in the title of this blog you get a lot of results, only most of these include jQuery and not Vanilla JavaScript. I really wanted this to work without jQuery so I’ve been experimenting and came to this solution. Below I’ll explain you my code.

It all starts with an IIFE, which stands for: Immediately-Invoked Function Expression. Simply put it’s an self invoking function, it activates itself. The syntax of an IIFE is:

(function () {
})();

Next we declare some variables inside this IIFE:

  • The first variable is filled with an array of all the links in my navigation so they can be selected one by one
var navList = document.querySelectorAll("nav ul li a");
  • The second variable called menu sets the size of my header.
var menu = 50;
  • The last variable is filled with a querySelector that selects all my sections so they can be measured.
var sections = document.querySelectorAll("section");

To make the menu active based on the scroll position, at first you have to make a function that reacts to somebody scrolling through your website. I’ve done this with this code:

window.onscroll = function () {
    };

In this function I placed a for loop which checks if you are going through the different sections. In this for loop is an if-statement, which checks if the top of the section you’re currently in is smaller or equal to the menu and if the bottom of this section is bigger or equal to the menu. If this is the case you’re currently in a section and this will become active in the menu, because the element in the navList array gets the classname active. If this is not the case, or you scroll out of this section the classname will be removed.

for (var i=0; i<sections .length; i++) {
    if(sections[i].getBoundingClientRect().top <= menu
        && sections[i].getBoundingClientRect().bottom >= menu) {
        navList[i].className = "active";
    } else {
        navList[i].className = "";
    }
}

When we combine all the code we get:

(function () {
    var navList = document.querySelectorAll("nav ul li a");
    var offset = 50;
    var sections = document.querySelectorAll("section");
    window.onscroll = function () {
        for (var i=0; i</sections><sections .length; i++) {
            if(sections[i].getBoundingClientRect().top <= offset
                && sections[i].getBoundingClientRect().bottom >= offset) {
                navList[i].className = "active";
            } else {
                navList[i].className = "";
            }
        }
    };
})();

My HTML in this case was:

<header>
    <nav id="main-menu">
        <ul>
            <li><a href="#about" class="active">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#experiences">Experiences</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<body>
<section id="about" ></section>
<section id="portfolio" ></section>
<section id="skills" ></section>
<section id="experiences" ></section>
<section id="contact" ></section>
</body>

Posted by Amanda de Rijk

Leave a Reply

Your email address will not be published. Required fields are marked *