Sticky Header disappears after section is out of viewport

[minemindmedia]

Hi, I am attempting to use the sticky header class to create a sticky header with a hero that fills the remaining area of the view port. It really works well for the first section but once the first section exits the view port, the sticky header exits with it.

I'd like to know how to keep the sticky header visible while scrolling the entire page while keeping the first section filling the remaining area of the view port.

By using h-screen and sticky together, h-screen adjusts for the offset of the header it appears, which is exactly what I do want, but I want the sticky header to remain in place always.

<div id="hero" class="flex flex-col lg:h-screen">
    <div id="sticky-header" class="sticky top-0">
        <header id="header" class="h-64 bg-gray-500">
            {{ $header }}
        </header>
    </div>
</div>

As soon as the bottom of the #hero h-full section reaches the bottom of the #stick-header, the sticky header begins to scroll up out of view. Is this the intended functionality? Kindly-

[simonswiss]

Hey 👋

Yes, a sticky element will only be sticky within the bounds of its parent container. That's the intended functionality.

If you want the header to remain sticky for the whole page, it will need to sit outside your hero h-screen element.

Could you please try reproduce what you're trying to achieve in a https://play.tailwindcss.com example?

[minemindmedia]

Hi !

Thanks for the response. I've put together a quick example. In this case I've added opacity to the header to show how the hero takes on the full height of the viewport after the header.

https://play.tailwindcss.com/jareggQZbo?layout=horizontal

Once the hero is scrolled up and meets the end of the header, they both scroll out of view together.
So what I'm attempting to achieve is to have the header stay fixed but keep the hero full height while using the header as an offset for the hero.

I know this can be achieved via javascript but I'm trying to avoid using it if possible.

[simonswiss]

Thanks for that!

Like I mentioned, sticky within the hero wrapper itself won't achieve what you want here, since it will only be sticky within the hero container.

You could move your sticky header outside of the hero, but then your hero image will "overflow" off the screen height by an amount that matches the height of the header (h-32 in your case).

One different way to achieve what you want is to have the header outside the hero section, and use fixed instead of sticky. This way, the header will not "push" the hero section down by its own height - it will stack over it instead.

To prevent the hero image to be masked by the header, you could apply a margin-top that matches the header height (h-32).

This way, your hero image will essentially be filling the "remaining space" between the bottom of the header and the bottom of the viewport.

Here's a Play example to show how it works: https://play.tailwindcss.com/K9xDUrNMZk?layout=horizontal

Note that now the header is fixed for the entire page, and your hero section respects the viewport height. This technique will only work if you know the height of the header.

Hope it helps 👍

[Trispa]

The h-screen is causing the issue.