By Roberto O'Breno

add-class-based-on-scroll-position.js

function header_change() {
   window.addEventListener('scroll', function(e){
       var distanceY = window.pageYOffset || document.documentElement.scrollTop,
           shrinkOn = 55,
           //header = document.querySelector("header");
           header = document.getElementsByClassName("actual_header");
       if (distanceY > shrinkOn) {
           classie.add(header,"smaller");
           // convert to new color and add apacity
           classie.add(header,"change_background")
       } else {
           if (classie.has(header,"smaller")) {
               classie.remove(header,"smaller");
               // convert back to orignal color and remove opacity change
               classie.remove(header,"change_background")
           }
       }
   });
}

// Call the function when the web page loads
window.onload = header_change();