// Get the header element
const header = document.querySelector('#header');

// Get the height of the header element
const headerHeight = header.offsetHeight;

// Add an event listener to the window object for the scroll event
window.addEventListener('scroll', () => {
  // Get the current scroll position of the window
  const scrollPosition = window.scrollY;

  // Check if the user has scrolled past the header element
  if (scrollPosition > headerHeight) {
    // If so, add a class to the header element to make it sticky
    header.classList.add('sticky');
  } else {
    // Otherwise, remove the class to make the header element non-sticky
    header.classList.remove('sticky');
  }
});