Hide Header While Scrolling Down

[martujv]

Hello!

I have the sticky header option active in my website but I want to hide the header while I'm scrolling down (both on mobile and desktop). This way, if I scroll down the header will hide and when I scroll up it will appear again. 

Just like the nike website: www.nike.com

Ideally it should have a smooth animation rather than an instant hiding/appearing.

My theme is Stiletto and my website is: https://kv4bbbag5hlpi4gm-60150284501.shopifypreview.com

I would really appreciate some help folks!

[Dan-From-Ryviu · Accepted solution]

Hi @martujv 

Please add this code to your theme.liquid file, before </body> tag in Online Store > Themes > Edit code

<script>
document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('.header__outer-wrapper'); // Adjust selector if needed
  let lastScrollY = window.scrollY;
  window.addEventListener('scroll', () => {
    const currentScrollY = window.scrollY;
    if (currentScrollY < lastScrollY) {
      // Scrolling up
      header.classList.add('scrolled-up');
    } else {
      // Scrolling down
      header.classList.remove('scrolled-up');
    }
    lastScrollY = currentScrollY;
  });
});
</script>
<style>
html.sticky-header-enabled .shopify-section.header__outer-wrapper {
    position: relative !important;
}
html.sticky-header-enabled .shopify-section.header__outer-wrapper.scrolled-up {
    position: sticky !important;
}
</style>

[martujv]

Hello, Dan! You can't imagine how glad I am for your help. It works and it's just like I wanted it to be! Thank you very much.

Just one thing, is there any way to add some sort of smooth 0.5s animation (an animation of the header coming down and up, depending if you scroll down or up), rather than it being an instant appearing / disappearing? 

Thank you again!