header-menu-animation.js

const initWaypoints = () => {
  const header = document.querySelector('.header');

  new Waypoint({
    element: document.querySelector('.intro'),
    handler: function (direction) {
      if (direction === 'down') {
        header.classList.add('header_hidden');

        setTimeout(() => {
          header.classList.add('header_sticky');
        }, 50);
      } else {
        header.classList.remove('header_sticky');
        header.classList.remove('header_hidden');
      }
    },
    offset: '-50%',
  });

  new Waypoint({
    element: document.querySelector('.about'),
    handler: function (direction) {
      if (direction === 'down') {
        setTimeout(() => {
          header.classList.remove('header_hidden');
        }, 50);
      } else {
        header.classList.add('header_hidden');
      }
    },
  });
};

initWaypoints()