Sticky – No effect

Found my answer here: https://www.ads-software.com/support/topic/position-sticky-has-no-effect/

It turns out that sticky will not work for a saved template part such as header, so add a group and place template part/header inside. Make the higher level group position > sticky. Works for me, maybe a bug?

maybe a bug?

That’s a caveat with the CSS position: sticky property itself. From MDN documentation:

Sticky: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)… The offset does not affect the position of any other elements.

In our case, this means that position: sticky will stick the Group block to its parent element. Thus to stick the Group block for a header to the top of the page, this Group block can not be placed inside another block.

This is even documented in the Group block’s support article: “Please note that only “top level” Group blocks can be set as sticky”.

@gappiah Thx for enlightening. It’s appreciated. I have updated all templates with header template part inside a group that then is sticky. It seems to work while editing header still updates globally. Cool