Straightforward sticky header

[gvgvgvijayan]

Actual:

There is no direct, easy way to turn the menu into a sticky menu. Even if you set position to sticky for the group inside header template part it won't work, therefore you have to do a cumbersome way of editing all templates and encase the header part in group then apply sticky position.

Consider if the website is well matured and have many templates for each post types, archives, miscellaneous pages like 404, search, etc. Then we have to touch all templates.

The caveat is also discussed here Sticky Header one of the best site to learn about Gutenberg.

Expectation:

Sticky menu should work out of the box, plus for DX provide an API (register_template_part_style) to add custom class to template part as like register_block_style.

Summary:

Summary of Sticky Menu Challenges in Gutenberg:

• Sticky Behavior Confined to Parent Boundaries: position: sticky is restricted to the scrollable boundaries of its nearest parent, causing issues when the parent container scrolls out of view.
• Template Part Encapsulation: Wrapping sticky styles inside a template part (header) limits their effectiveness due to inherited DOM structure constraints.
• Manual Template Adjustments: Achieving consistent sticky behavior across templates requires editing each template file, increasing the workload.
• Lack of Native Gutenberg Sticky Tools: Gutenberg lacks a straightforward, out-of-the-box solution for applying sticky behavior globally across block templates.
• Complexities in CSS and JavaScript: Workarounds, such as using position: fixed or JavaScript, often disrupt alignment or introduce inconsistencies.