In this video I will show you how to create a minimized Sticky Header using Gutenberg blocks in WordPress. No additional plugins required. I got inspiration for this from the Joe Rogan website. While alot of tutorials require you to install Elementor or other page builders, I wanted to see how possible it would be to do this in default WordPress blocks editor.

Please follow the video to see how to use the code properly.

Code Snippet:

<style>
    .hider{
          display: flex;
          align-content: center;
          position: fixed;
          width: 100% !important;
          z-index: 100; 
          opacity: 0;
          transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
</style>
<script>
// Select the header and hider elements
const headerElement = document.querySelector('#trigger');
const hiderElement = document.querySelector('.hider');
const observer = new IntersectionObserver(
    (entries) => {
      const entry = entries[0]; // Only one target observed
      if (entry.isIntersecting) {
    hiderElement.style.opacity = '0';
    hiderElement.style.transform = 'translateY(-100%)';
} else {
    hiderElement.style.opacity = '1';
    hiderElement.style.transform = 'translateY(0)';
}
    },
    {
      root: null,              // viewport
      rootMargin: '500px 0px', // extend trigger area above & below by 500px
      threshold: 0             // trigger as soon as it enters/exits
    }
  );
  // Start observing the header
  observer.observe(headerElement);
</script>