How to hide sticky header on scroll down and show it again on scroll up — Shrine Pro theme

[ayubbaloch]

Hi everyone,

I’m using the Shrine Pro theme on my store and I have the sticky header enabled. Right now it stays fixed on screen at all times while scrolling.

I’d like to customize this behavior so that:

• The sticky header hides when scrolling down
• The sticky header reappears when scrolling up

Has anyone done this on Shrine Pro before, or know which file/section controls the sticky header behavior (e.g. header.liquid, global.js, or theme settings)? I’m comfortable adding custom CSS/JS via the theme editor’s custom code sections if someone can point me to the right approach.

Any code snippets or theme setting suggestions would be really appreciated. Thanks in advance!

[NKCreativeSoulutions]

That’s a pretty neat idea!

There are probably hundreds of ways to do it. Right off the top of my head, I’d create a boolean variable for scrolling down and when this value is true, you add the css value of hidden to the class names of the header. Remove it when the value is false.

Now, you need to determine how to identify if the user is scrolling in the appropriate direction, this stackexchange post should get you sorted for that:

detecting scroll direction on StackExchange

Hope it helps!

Nathan

[New_Dev]

Nathan’s approach makes sense. One thing I’d add is to hide the header with transform: translateY(-100%) rather than display: none, so the transition stays smooth and doesn’t cause a layout jump.

[anna_backlip_hq]

I’m not sure what the exact header selector is in Shrine Pro, but it should be the same general idea. Find the header element, then use a small script to check whether the user is scrolling up or down. The script adds a class when scrolling down and removes it when scrolling up:

const header = document.querySelector(‘YOUR_HEADER_SELECTOR’);
let lastScrollY = window.scrollY;

if (header) {
window.addEventListener(‘scroll’, () => {
const currentScrollY = window.scrollY;

if (currentScrollY > lastScrollY && currentScrollY > 80) {
  header.classList.add('header-hidden');
} else if (currentScrollY < lastScrollY) {
  header.classList.remove('header-hidden');
}

lastScrollY = currentScrollY;

});
}

Then add CSS for the hidden state:

YOUR_HEADER_SELECTOR {
transition: transform 0.2s ease;
}

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

[Ploqo]

I tested on the Shrine Pro demo store (by injecting js and css in the client side).

Shrine Pro is built on Dawn.

Building on Nathan (translateY is the right call, it keeps the motion smooth with no layout jump)

• Header hides when you scroll down.
• Header slides back in when you scroll up.
• Smooth slide, no jump, works on every page.

steps

• Online Store > Themes > … > Edit code.
• open layout/theme.liquid, scroll to the bottom, and paste this on a new line just above the closing </body> tag.
• Save.

{%- comment -%} Hide sticky header on scroll down, show on scroll up {%- endcomment -%}
<style>
  [data-hs-header]{transition:transform .35s ease !important;will-change:transform;}
  [data-hs-header].hs-header--hidden{transform:translateY(-100%) !important;}
</style>
<script>
(function(){
  function init(){
    var header =
      document.querySelector('.section-header') ||
      document.querySelector('sticky-header') ||
      document.querySelector('.header-wrapper') ||
      (document.querySelector('header') && document.querySelector('header').closest('.shopify-section'));
    if(!header) return;
    header.setAttribute('data-hs-header','');
    var lastY = window.pageYOffset || document.documentElement.scrollTop;
    var ticking = false;
    function update(){
      var y = window.pageYOffset || document.documentElement.scrollTop;
      var threshold = header.offsetHeight || 80;
      if(y > lastY && y > threshold){ header.classList.add('hs-header--hidden'); }
      else if(y < lastY){ header.classList.remove('hs-header--hidden'); }
      lastY = y <= 0 ? 0 : y;
      ticking = false;
    }
    window.addEventListener('scroll', function(){
      if(!ticking){ window.requestAnimationFrame(update); ticking = true; }
    }, {passive:true});
  }
  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); }
  else { init(); }
})();
</script>

Notes

• Slide speed: change .35s (lower is faster).
• Hide sooner or later: header.offsetHeight is the point where hiding starts. Replace it with a number like 150 to hide only after scrolling further down.

Alternatives: sticky header apps lile qikify Sticky Header or Sticky Header Effects

Regards,
Ploqo