For my current project, I am incorporating FullPageJS and using a fixed top menu that adjusts its height based on the viewport size.
On smaller screens, the menu items will be stacked on top of each other, while on wider screens, the menu items will be positioned next to each other, resulting in varying heights for the menu.
I referred to the Fixed Elements demo from FullPageJS and noticed that by inspecting the "Fixed elements" h1 with Firefox dev tools and deselecting vertical-align:middle within .fp-tableCell, the text appeared to move under the fixed header.
In reality, the content was not moving but rather aligning itself at the top border of its container. This behavior occurs because the sections always occupy 100% of the viewport height, causing content within the sections that is not vertically aligned in the middle of a table cell element to be masked by fixed elements like a fixed navigation bar.
https://i.stack.imgur.com/Gc6q4.png
My goal is to have a fixed header or footer without the sections sliding beneath the fixed elements, but instead stopping at the boundary of the fixed element to prevent any obstruction of the section's content.
One approach could be inserting a placeholder element with the same height as the fixed element below it, positioning it within the flow of the section to restrict the section from slipping under the fixed element.
Waypoints Sticky Elements achieves this for dynamically generated sticky or fixed elements:
A wrapper is created around the element.
This wrapper remains static on the page, serving as an empty placeholder in the document flow while the actual element gains or loses fixed positioning.
The wrapper element acts as the element used in the underlying Waypoint functionality.
The wrapper's height is set to match the wrapped element's height, ensuring consistent alignment even when the element becomes fixed, thereby preventing layout shifts.
When the sticky element reaches the top of the window, a class is added. This class should be styled using CSS to provide fixed positioning to the sticky element.