Fixed Navigation (Gotcha Demo)

This bar uses `fixed top-0 left-0 w-full`. Content below might be obscured.

Content Potentially Under Fixed Header

This content is right after the fixed header in the HTML. Because the header is `fixed`, it's taken out of the normal flow, and this content starts from the top of the viewport, underneath the header. You might only see the bottom part of this text initially.

Some more content to see scrolling behavior.

Fixed Footer (Space Accounted For)

This bar uses `fixed bottom-0 left-0 w-full`. Padding is added to body/main content.

Page Content With Offset

This content area has padding applied (e.g., `pt-20` for the top fixed header, `pb-24` for the bottom fixed footer) to prevent the fixed elements from overlapping it. This is a common way to handle the "Gotcha" of fixed positioning.

Content Block 1

Scroll down to see the fixed elements remain in place. The red header stays at the top, and a green footer will stay at the bottom (once you scroll enough to "reach" it if the page wasn't long enough initially).

Content Block 2
Content Block 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Content Block 4
Content Block 5
Content Block 6 (More content)
Content Block 7
Content Block 8
Content Block 9
Final Content Block (check footer visibility)