Stick on Scroll Header

theStick on Scroll Header.css

body:not(.transparent-header) #header.header-standard.stick-on-scroll {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
/*     z-index: 9; */
    background-color: rgb(255 255 255 / 89%);
    backdrop-filter:blur(5px);
}
.admin-bar .header-standard.stick-on-scroll {
    top: 32px!important;
}

theStick on Scroll Header.js

// Listen for scroll events on the window
window.addEventListener('scroll', function() {
  // Get the current scroll position
  const scrollPosition = window.scrollY || document.documentElement.scrollTop;

  // Find the <header> element with classes 'header' and 'header-standard'
  const header = document.querySelector('header.header.header-standard');

  // Ensure the element exists and has exactly 2 classes
  if (header && header.classList.length === 2) {
    // Check if the scroll position is greater than 300px
    if (scrollPosition > 300) {
      // Add 'stick-on-scroll' class if it's not already there
      header.classList.add('stick-on-scroll');
    } else {
      // Remove 'stick-on-scroll' class if the scroll position is less than or equal to 300px
      header.classList.remove('stick-on-scroll');
    }
  }
});