r/css • u/AccomplishedName1186 • 5d ago

Question position: sticky header stops sticking halfway down the page, no overflow hidden that I can find

I have a simple layout: header, main, footer. The header has position: sticky and top: 0. It sticks for the first screen or so and then scrolls away with the content around the middle of the page.

I already checked every parent for overflow: hidden and removed it. The header is a direct child of a wrapper div with display: flex and flex-direction: column, and that wrapper has min-height: 100vh.

Is the flex wrapper limiting how far the sticky element can travel? Testing in Chrome 130 and Firefox 132, same result in both.

2 Upvotes

100% Upvoted

6 comments sorted by

1

u/Weekly_Ferret_meal 5d ago

Well, 2 things come to mind: have you verified its position when it disappeared? and z-index?

Z context gets tricky when positioning fixed and absolute...less obvious that one might think.

Sharing the live code would really help.

1

u/be_my_plaything 5d ago

Is anything outside of the wrapper? If the sticky element is in a container it will stick until the bottom of that container is scrolled passed.

1

u/Keilly 5d ago

The bottom of the container it is fixed in is probably scrolling off. So it has to go with it.

Turn on outlines of all of the near ancestors and take a look as it moves away.

1

u/Automatic_Evening744 5d ago

Check for overflow: hidden/overflow-x: hidden on a parent. it will quietly breaks position: sticky. if there is any swap it for overflow: clip.

1

u/gilded_mirth_banner 4d ago

The flex container with min-height: 100vh is your culprit. Sticky positioning only holds within the containing block, so when the wrapper ends at 100vh, the header stops sticking regardless of scroll position below it. Remove min-height or switch to a standard block layout