I've been diving into the concept of `position: sticky`, and honestly, after 15 years in web development, I still don't quite get it. I have a specific example that confuses me, which is here: https://codepen.io/g105b/pen/bNdXYGG. The situation is that I need to keep the `site-nav` element inside the `header` for semantic reasons. I think I understand that since `site-nav` is inside the `header`, which is the scrollable container, the `site-nav` won't actually be sticky because the `header` doesn't scroll. But, when I replace `header` with `custom-header`, it works as I expect. Here are my questions: 1) If I switch to ``, what CSS properties can I apply to `
5 Answers
The issue is that `
By the way, I found out that `` is a custom element. It doesn’t do anything at first but is handy if you add functionalities later. Just something to keep in mind!
Interesting! I didn’t know that. I’m planning to check out custom elements more.
To clarify, the problem arises because your `` is inside a `
Thanks, this helps! I read in the MDN docs that sticky elements are supposed to intersect with their nearest scrolling ancestor. Makes more sense now!
Yeah, I get the struggle! Honestly, I can never make sticky work how I want it to either. It can be super finicky!
Phew! Glad I’m not alone in this!
Just to add, remember that the sticky behavior is interrupted if it doesn’t have room to move within its parent container. Changing the display of your custom element to block will have the same effect as the default `
Right! So, does that mean a sticky element's container is always the closest non-inline element? Just trying to wrap my head around it.