Fixed Menu on Scroll – Vanilla JavaScript ES5

What are we going to do?

We will be making a menu that stays on the bottom of the page, and once it hits the top, it stays there fixed. We will be also adding a cool animation for the logo.

You can see the full version on codepen here: https://codepen.io/lovetocodex/pen/eyyjgX?editors=1010

The HTML

In the HTML we will have a banner – that can be an image, a welcome text, whatever you want. We will have the navigation and the logo in between the links.

To make the script work, we will need to add some space that we can scroll, so I have added ‘main’ tag.

Here is the code:

<header class="header">
    
    <div class="header-banner">
        <h1>Welcome to fixed Menu on Scroll</h1>
    </div>

    <nav class="nav">
    <ul class="nav-list">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>	
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
    </ul>
        
    <span class="logo"><i class="fa fa-ravelry" aria-hidden="true"></i></span>
        
    <ul class="nav-list">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>	
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
    </ul>
    </nav>
    
</header>

<main class="main">
    
</main>

 

The CSS

As mentioned before, we will need to have the main tag so it has a height of a certain px set, so we can scroll down.

One thing that I want to mention is that the nav is set to the bottom with position absolute like this:

.nav {
    position: absolute;
    bottom: 0;
    background: white;
    width: 100%;
    text-align: center;
}

That’s totally fine. However, what we want to achieve is that when we scroll past the top, we want it to stay on top. To achieve that we need to position it fixed. Since we have a ‘bottom: 0’ in the nav, and we need to set ‘top: 0’ (so the nav stays at top when fixed) the nav will be expanded 100% of the screen height. To remove that effect, we just need to add a ‘bottom: unset’ to our fixed class.

.nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: unset;
}

 

The JavaScript

The best way to start a project is by breaking it apart and plan. What we want is that when the navigation hit’s top, it needs to stay top while we are scrolling and looking at the content.

Before we start, you should get familiar with the HTML and CSS provided.

Planning

We will need to get the navigation, then when it hit’s the top of the browser, we want the navigation to stay there while we enjoy consuming the content.

Setting up the project

As always, we start with the ‘onload’ function.

window.onload = function() {

}

Inside, we will set up the basic things we know we need to have.

window.onload = function() {

    // Variables

    // Functions

    // Event Listeners

}

Now we are ready to write some code.

Setting Variables

We want the nav and the logo, let’s get that.

window.onload = function() {

        // Variables
        var nav = document.querySelector('.nav');
        var logo = document.querySelector('.logo');

}

Here we are storing and selecting things we will work with. We get the nav and the logo by using the ‘document.querySelector.

Event Listener

Hmmm, since this will be on scroll, we need to add in the ‘eventListener’ to the window, since when the window scroll, we want to do something – make the nav fixed.

window.addEventListener('scroll', navFixed);

We don’t have the ‘navFixed’ function yet, but we will create it right now. We want the function to run when the window is scrolling.

Making A function

Alright, now that we got the variables and eventListener in place, let’s write the function.

function navFixed(e) {

}

We will pass in the ‘e’, since when we scroll, we are getting an event, so we want to get it there. Note that the ‘e’ can be whatever, however, the ‘e’ is a shorthand for ‘event’ – but it can be anything.

So, we want to add the class to the nav after it reached the top.

We can achieve that by using the ‘scrollY’ build in function in JS.

What the ‘scrollY’ function does, it returns the value of the window on how much it’s scrolled vertically.

Is this the same as navigation place? If it’s less or the same, we want to to do this or that.

function navFixed(e) {
    if(window.scrollY >= navTop) {
        
    } else {
        
    }
}

Now the window knows for what to look at.

We need to say what to do if that happens. Okay, we want to make the nav fixed, and if it’s below we want to unfix it.

function navFixed(e) {
    if(window.scrollY >= nav) {
        nav.classList.add('is-fixed');
    } else {
        nav.classList.remove('is-fixed');
    }
}

Awesome!

But wait, it’s not smooth! What’s happening? The browser took the center of the nav. What we want to do is tell the browser to make the nav fixed when the top of it, touches the top of the browser.

All you need to do, is add this into the variables:

var navTop = nav.offsetTop;

and change the ‘navFixed’ function inside the if, to ‘navTop’, like this:

    function navFixed(e) {
    if(window.scrollY >= navTop) {
        nav.classList.add('is-fixed');
    } else {
        nav.classList.remove('is-fixed');
    }
}

Awesome! You did it!

Here is the full JS code:

window.onload = function() {
    
    // Variables
    var nav = document.querySelector('.nav');
    var navTop = nav.offsetTop;
        
     // Functions
    function navFixed(e) {
        if(window.scrollY >= navTop) {
            nav.classList.add('is-fixed');
        } else {
            nav.classList.remove('is-fixed');
        }
    }
    
    // Event Listener
    window.addEventListener('scroll', navFixed);
    
}

 

BONUS: Adding the animated logo

This one is quite simple!

We need to select the logo, so let’s add the variable.

var logo = document.querySelector('.logo');

And all we need to do is in CSS add the transition and change the font-size. Check your CSS 🙂

function navFixed(e) {
    if(window.scrollY >= navTop) {
        nav.classList.add('is-fixed');
        logo.classList.add('is-small');
    } else {
        nav.classList.remove('is-fixed');
        logo.classList.remove('is-small');
    }
}

That’s it!

Conclusion

You have the menu that gets’s fixed on the top when you scroll on the page, with the logo that changes the size when you’re doing it.

Don’t stop here! We have learned how to use the ‘scrollY’ and the ‘offsetTop’ function, as well as how to make the awesome menu that goes fixed when scrolling.

If you have any thoughts or questions, comment below!

View the source code and working version here: https://codepen.io/lovetocodex/pen/eyyjgX

Happy Coding!

 

 

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments