Function to watch for scroll position and apply class

scroll-watch-function.js

// Depends on JQ
window.addEventListener('scroll', function(e){
  var distanceY = window.pageYOffset || document.documentElement.scrollTop,
    transitionPoint = 500,
    $header = $(".fixed-header");
  if (distanceY > transitionPoint) {
    $header.addClass("smaller");
  } else {
    $header.removeClass("smaller");
  }
});