Topic: Site Header Block – Sticky “when scrolling up” with delay

Gerrit
May 21, 2026 at 3:18 am

Hi!

I want to use the feature Sticky “when scrolling up” with your Site Header Block. I always used the Customizer option before when I wanted to achieve this. But your Site Header Block offers more control.

But while the implementation with the Customizer worked smoothly I have a problem with the Site Header Block.

Expected behaviour: The Sticky Header disappers when I start to scroll down and appears when I start to scroll up.

Actual behaviour: The Sticky Header disappears when I stop to scroll down appears after I stop to scroll up.

This feels like a delay and bad UX. Is it a problem on my end? Or is it intended like this? Can I change it with custom CSS/JS?
George
May 21, 2026 at 5:27 am
Hello,

The Site Header Block’s “When Scrolling Up” mode detects the direction change slightly after you stop scrolling rather than the instant you reverse, which causes the delay you’re experiencing.

You can fix it with a small JavaScript snippet. Keep the sticky setting on When Scrolling Up, then add a Hook Element hooked to wp_footer and Display -> Entire Site, containing:
```
<script>
(function () {
  const header = document.querySelector('.gb-site-header');
  if (!header) return;

  let lastY = window.scrollY;

  window.addEventListener('scroll', function () {
    const currentY = window.scrollY;

    if (currentY < lastY) {
      header.classList.add('gb-is-sticky');
      header.style.cssText = 'position: fixed; top: 0px; z-index: 100; left: 0px; right: 0px; width: auto;';
    } else {
      header.classList.remove('gb-is-sticky');
      header.style.cssText = '';
    }

    lastY = currentY;
  }, { passive: true });
})();
</script>
```
One thing to note: the top value is hardcoded to 0px. If you’re testing while logged into WordPress, you’ll see the header sit behind the admin bar — that’s expected. On the front end for visitors it will sit flush to the top as intended.

Gerrit

May 21, 2026 at 6:29 am

Thanks for the fast reply George.

Your code makes the change instant like it should but introduces another issue: the element now takes up space in the document flow and makes the site content jump if it appears and disappears.

Claude took your code and changed it. I need to leave the Site Header at “always sticky” though to prevent the scripts fighting each other but otherwise it works like it should.

<style>
  .gb-site-header {
    transition: transform 0.3s ease;
    will-change: transform;
  }
  .gb-site-header.is-hidden {
    transform: translateY(-100%);
  }
</style>

<script>
(function () {
  const header = document.querySelector('.gb-site-header');
  if (!header) return;

  let lastY = window.scrollY;
  let ticking = false;

  window.addEventListener('scroll', function () {
    if (ticking) return;
    window.requestAnimationFrame(function () {
      const currentY = window.scrollY;

      if (currentY > lastY) {
        header.classList.add('is-hidden');
      } else {
        header.classList.remove('is-hidden');
      }

      lastY = Math.max(currentY, 0); // guard against negative scroll on iOS overscroll
      ticking = false;
    });
    ticking = true;
  }, { passive: true });
})();
</script>

George
May 21, 2026 at 6:31 am

Hello,

Ok, I see, glad it’s working then!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.