Scroll-back Fixed Header Responsiveness/Speed

Hello all,

Does anyone have suggestions on how to improve the responsiveness of the 'scroll-back' fixed menu in Squarespace 7.1? Currently, there is a 1-2 second lag before the menu reappears when a user scrolls up, which is not ideal for accessibility. I'm aiming for a more instantaneous response, similar to this example.

This issue pertains to the default fixed header style > scroll-back settings in Squarespace 7.1. I have tried the following CSS solution, but it hasn't resolved the issue:

/* Remove transition delay for immediate appearance on scroll up */
.header-nav-wrapper {
  transition: transform 0s ease-in-out !important;
}

.header-nav-wrapper.is-scrolling-down {
  transform: translateY(-100%) !important;
}

.header-nav-wrapper.is-scrolling-up {
  transform: translateY(0) !important;
}

/* Ensure immediate reappearance on scroll up */
body[data-scrolled-up='true'] .header-nav-wrapper.is-scrolling-down {
  transform: translateY(0) !important;
}

Any advice or alternative solutions would be greatly appreciated!

6 hours ago, Guvnor said:

Hello all,

Does anyone have suggestions on how to improve the responsiveness of the 'scroll-back' fixed menu in Squarespace 7.1? Currently, there is a 1-2 second lag before the menu reappears when a user scrolls up, which is not ideal for accessibility. I'm aiming for a more instantaneous response, similar to this example.

This issue pertains to the default fixed header style > scroll-back settings in Squarespace 7.1. I have tried the following CSS solution, but it hasn't resolved the issue:

/* Remove transition delay for immediate appearance on scroll up */
.header-nav-wrapper {
  transition: transform 0s ease-in-out !important;
}

.header-nav-wrapper.is-scrolling-down {
  transform: translateY(-100%) !important;
}

.header-nav-wrapper.is-scrolling-up {
  transform: translateY(0) !important;
}

/* Ensure immediate reappearance on scroll up */
body[data-scrolled-up='true'] .header-nav-wrapper.is-scrolling-down {
  transform: translateY(0) !important;
}

Any advice or alternative solutions would be greatly appreciated!

Can you share your URL so I can check it easier?

If your site haven't been published yet, you can refer here to share it with the protected password

Thanks @HoaLT, you can access the dev site here:

https://yellow-turkey-4c97.squarespace.com/

Password: qft3hyu!rgj5ztw8HNY

8 hours ago, Guvnor said:

Thanks @HoaLT, you can access the dev site here:

https://yellow-turkey-4c97.squarespace.com/

Password: qft3hyu!rgj5ztw8HNY

This code controls the transition effect when you scroll back.

Try the following custom CSS to set transition duration with 0

.header.shrink {
  transition-duration: 0ms !important;
}

Hope it makes sense

Appreciate you taking a look at this @HoaLT. I've applied the code and removed any conflicting CSS, but as you can see on the Dev site, the same 1-2 second lag persists before it is revealed to the user on scroll-up. Do you know where to target either the timing or distance of the 'scroll-up' function?