Hide Header While Scrolling Down

[martujv]

Hello!

I want to hide my header if I'm scrolling down and make it appear if I'm scrolling up on my website.

Something similar to the Nike website: www.nike.com

My theme is Stiletto and my website is www.truepodium.com (password: y22)

Thanks in advance!

[DaisyVo]

Hi @martujv 

To hide your header while scrolling down and show it when scrolling up, add the following custom JavaScript and CSS code to your theme:

Steps:

1-Access Theme Editor:

• Go to Shopify Admin > Online Store > Themes > Click Actions > Edit Code.

2-Add Javascript:

• Open the theme.liquid file or a layout/theme.liquid file.
• Just before the closing </body> tag, add the following script:

<script>

  document.addEventListener("DOMContentLoaded", function () {

    let lastScrollTop = 0;

    const header = document.querySelector("header"); // Update "header" selector to match your header element.

    window.addEventListener("scroll", function () {

      const currentScroll = window.pageYOffset || document.documentElement.scrollTop;

      if (currentScroll > lastScrollTop) {

        // Scrolling down

        header.style.transform = "translateY(-100%)";

      } else {

        // Scrolling up

        header.style.transform = "translateY(0)";

      }

      lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;

    });

  });

</script>

3-Add CSS:

• Open the theme.css or styles.css file.
• Add the following CSS to enable smooth transitions:

header {

  transition: transform 0.3s ease-in-out;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 9999;

}

4-Save and Test:

• Save the changes and refresh your website to test the functionality.

If your header has a specific class or ID, replace "header" in the script with your actual selector (e.g., .site-header or #header). Adjust the script and styles to match your website structure.

[martujv]

Hello! 

First of all thanks for the reply! but I find 2 important problems:

1) The header now is not below the announcement bar (this happens in every page) and it looks strange: 

2) The transition of the header's disappearing and appearing is not smooth but instant, which looks bad. Is there any way to make a smooth transition?

Thanks again!