Sticky Header (Hide on Scroll Down, Show on Scroll Up): Always Hide on Scroll Down (Dawn 15.4)

Technical Q&A
, , , ,
1

Hi there!

I’m using the Dawn 15.4 theme and recently added custom code to make my header sticky on scroll-up and hidden on scroll-down. Everything works well, but I’ve noticed one issue:

When I scroll up from the middle of the page (for example), the header appears as expected. However, if I then scroll down again (without reaching the top of the page), the header stays visible instead of hiding again.

Is there a way to adjust the code so the header always hides whenever I scroll down, regardless of my current scroll position?

Below are the modified code parts I’ve added for reference.

header.liquid:

{% javascript %}
class StickyHeader extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.header = document.querySelector('.section-header');
    // force scroll-up reveal mode
    this.headerIsAlwaysSticky = false;
    this.headerBounds = {};

    this.setHeaderHeight();
    window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this));

    this.currentScrollTop = 0;
    this.preventReveal = false;
    this.predictiveSearch = this.querySelector('predictive-search');

    this.onScrollHandler = this.onScroll.bind(this);
    this.hideHeaderOnScrollUp = () => (this.preventReveal = true);

    this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
    window.addEventListener('scroll', this.onScrollHandler, { passive: true });

    this.createObserver();
  }

  setHeaderHeight() {
    document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`);
  }

  disconnectedCallback() {
    this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
    window.removeEventListener('scroll', this.onScrollHandler);
  }

  createObserver() {
    let observer = new IntersectionObserver((entries, observer) => {
      this.headerBounds = entries[0].intersectionRect;
      observer.disconnect();
    });
    observer.observe(this.header);
  }

  onScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

    if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
      // scrolling down → hide
      this.header.classList.add('scrolled-past-header');
      if (this.preventHide) return;
      requestAnimationFrame(this.hide.bind(this));
    } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
      // scrolling up → reveal
      this.header.classList.add('scrolled-past-header');
      if (!this.preventReveal) {
        requestAnimationFrame(this.reveal.bind(this));
      } else {
        window.clearTimeout(this.isScrolling);
        this.isScrolling = setTimeout(() => (this.preventReveal = false), 66);
        requestAnimationFrame(this.hide.bind(this));
      }
    } else if (scrollTop <= this.headerBounds.top) {
      this.header.classList.remove('scrolled-past-header');
      requestAnimationFrame(this.reset.bind(this));
    }

    this.currentScrollTop = scrollTop;
  }

  hide() {
    this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
    this.closeMenuDisclosure();
    this.closeSearchModal();
  }

  reveal() {
    this.header.classList.add('shopify-section-header-sticky');
    requestAnimationFrame(() => {
      this.header.classList.remove('shopify-section-header-hidden');
      this.header.classList.add('animate');
    });
  }

  reset() {
    this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
  }

  closeMenuDisclosure() {
    this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
    this.disclosures.forEach(disclosure => disclosure.close());
  }

  closeSearchModal() {
    this.searchModal = this.searchModal || this.header.querySelector('details-modal');
    if (this.searchModal) this.searchModal.close(false);
  }
}

customElements.define('sticky-header', StickyHeader);
{% endjavascript %}

base.css:

/* Sticky header animation */
#shopify-section-header {
  transition: transform 0.25s ease-in-out;
  will-change: transform;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

.shopify-section-header-hidden {
  transform: translateY(-100%);
}

.shopify-section-header-sticky.animate {
  transform: translateY(0);
}

Website link: Original & Custom Oil Paintings by DrawWithDi

Thank you in advance for any help!

2

Hey @DRAWandCARE,

Could you please share your store URL and password (if applicable) so that I can take a look and provide you the solution code?

Looking forward to hearing back from you.

Best,

Daniel Smith