Add a CSS class on scroll with Vanilla JavaScript

Amanda de Rijk
16-09-2016

We have all been in a situation where we want to add an animation or a different style to an HTML element on scroll. In this blog I’ll tell you how I did this and what problems I found while doing this.

To start we need to create a function which gets activated when the user scrolls with the mouse. For this I used this line of code, but of course there are multiple ways to do this:

window.onscroll = function changeClass(){
}

Next we need to create a variable for the scroll position, to be able to check where on the page we are. In this case I wanted to check the vertical scroll position, but of course it is also possible for the horizontal scroll position. If you want to check the horizontal position you only need to replace the Y for an X. Because of browser compatibility I used both the ‘Offset’ and the ‘scrollTop’. All combined your code will look something like this:

var scrollPosY = window.pageYOffset | document.body.scrollTop;

The easiest way to check where you are with scrolling is with a static number. To check it you will use a if statement:

if(scrollPosY > 100) {
          navBar.className = ('basic-classname added-classname');
    } else if(scrollPosY <= 100) {
         navBar.className =  ('basic-classname');
    }

So now the class gets added when the scrollPosY is bigger than 100, the class gets removed again when the scrollPosY is smaller or equal to 100.

Now lets make this a bit more complex by changing the class of the navBar on scroll when the second section hits the navBar. First I created variables with the section, the section top and the height of the navBar:

var navBar = document.getElementById('navBar'); // selects the element by Id
var secondSection = document.getElementById('secondSection');  // selects the element by Id. 
var secondSectionTop = aboutSection.getBoundingClientRect().top; //selects the Y position of the element in the view
var navBarHeight = navBar.getBoundingClientRect().height; //select the height of the navBar

Make sure you select all the HTML elements by Id because .getBoundingClientRect() will not work with classes. If you try this with a class the console will give you the error: .getBoundingClientRect() is not a function.

Next I checked is the secondSectionTop was at the same scroll position as the navBarHeight to add the class:

if(secondSectionTop <= navBarHeight) {
          navBar.className = ('basic-classname added-classname');
    } else if(aboutSectionTop >= navBarHeight) {
         navBar.className =  ('basic-classname');
   }

If I combine all the code together it looks like this:

window.onscroll = function changeNav(){
    var navBar = document.getElementById('navBar'),
          secondSection = document.getElementById('secondSection'),
          secondSectionTop = aboutSection.getBoundingClientRect().top, 
          navBarHeight = navBar.getBoundingClientRect().height;

    if(secondSectionTop <= navBarHeight) {
          navBar.className = ('basic-classname');
    } else if(aboutSectionTop >= navBarHeight) {
         navBar.className =  ('basic-classname added-classname');
    }
}

LEAVE A REPLY

6 Comments

  • Carlos says:

    This was great!
    How about using the .classList property in order to avoid hardcoding the ‘basic-classname’? It could be something like:
    var navBarClasses = navBar.classList;

    and then you could do:
    navBarClasses.add(‘custom class’);
    or
    navBarClasses.remove(‘custom class’);

    br,

  • Elio says:

    Hey there,
    Thanks for this great tutorial.
    Are there any source files, or is there a demo, so that I can see the code in context?
    Thanks – Elio

  • Jeff says:

    Excellent! I loves me some vanilla!

  • Harun says:

    Very good website!

  • Nouar Talbi says:

    it return error in line
    var secondSectionTop = aboutSection.getBoundingClientRect().top;
    aboutSection not defined

you might also like