Shrink a sticky header on scroll

How To
1

Hey

I’m using the Sticky Header functionality. What I’d like to do is reduce the block padding of my header on scroll, as it’s quite tall. As there’s no in-built function to do this (it seems), I’m doing it via CSS:

header.scrolling section {
  padding-block: var(--space-m);
}

This works, however it creates a jump in the page, presumably where the header placeholder is also resized / recalculated, affecting the page flow. What I can’t work out is where that ‘placeholder’ value is defined and be able to mitigate it changing.

Or am I thinking about this wrong and there’s an easier solution? (New Bricks user here, still feeling my way around!)

Thanks!

1 Like
2

Hi, I have the same problem using this css. There is a jump apparently because sticky elements don’t behave like regular elements in the flow…any workaround?

header.scrolling .fb-fancy-header {
    padding-top: var(--space-4xs);
    padding-bottom: var(--space-4xs);
    transition: padding 0.3s ease!important;
    will-change: padding;
}

I figured out before finishing this replay that overriding a transition in the header with !important doeas the trick. Though, of course !important is not very good practice

3

Hi 23devs - thanks for the suggestion, unfortunately though that’s not working for me either.

It’s not so much the transition that’s the problem, it’s the fact that the physical footprint of the header in the page flow reduces as well as the sticky header itself, causing the page height to shrink and the content to jump up.

I’m essentially looking for a way for the sticky header to change height, but for its footprint in the document flow to remain constant.

In previous JS non-Bricks incarnations this was handled by inserting a fixed height proxy div as a placeholder when the header became unstuck. Not sure quite sure how to handle that in this implementation though.

4

I see what you mean, this code I shared works well with chrome but not with Safari.
Let’s hope someone can help us and this can be included in Bricks.

1 Like
5

@23devs Got it working by fixing the height of the outer <header> element, then you’re free to change the properties of the <section> inside that without affecting page flow. Works in desktop Chrome and Safari - haven’t browser checked outside of that yet.

It does have the wrinkle that the empty area of the <header> that hasn’t been shrunk acts as an invisible blocker to other interactive elements on the page, so you have to do some pointer-events shenanigans to mitigate it.

I’m calculating the height using JS so user font sizes don’t affect it, but you could just magic number it with CSS (height: 80px or somesuch). Still need to add some JS to adjust for browser resizing, but this works if you consider the viewport isn’t going to change (probably 98% of cases).

<script>
const header = document.querySelector('#brx-header');
header.style.height = header.clientHeight + 'px';
</script>

<style>
/* Sticky header scrolling */
header {
  /* Stop the invisible header from blocking clicks on the main page */
  pointer-events: none;
}
header > section {
  /* Allow back in clicks on the sticky header's content: */
  pointer-events: all;
  /* Annoying that we need to !important this to override frontend.css */
  transition: padding 0.15s ease-in-out !important;
}
header.scrolling > section {
  padding-block: var(--space-xs);
}
</style>
6

To make this more Bricks-friendly, it might be nice to have a toggle in the builder options like “Fix wrapper height” which does the JS automatically, giving us more control when animating the header contents.

(Feature request!)

7

Hi, I have Bricks Extras and there’s a solution there, I’ll be using that. Thanks for the update!

1 Like