onScroll Header animation

_onScroll_header_animation.md

onScroll Header animation

onScroll_header_animation.js

// Header Styles
var stuck = false;
var stickPoint = getDistance();
function getDistance() {
  var topDist = topNav.offsetTop;
  return topDist;
}
window.onscroll = function(e) {
  var distance = getDistance() - window.pageYOffset;
  var offset = window.pageYOffset;
  if ( (distance <= 0) && !stuck) {
    topNav.classList.add('top');
    stuck = true;
  } else if (stuck && (offset <= stickPoint)){
    topNav.classList.remove('top');
    stuck = false;
  }
}