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