DEV Community

Discussion on: One Line - Sticky Header using CSS

gsarig profile image
Giorgos Sarigiannidis • Edited on

A not so rare scenario of those two conflicting would be to have a container at the top of your DOM (e.g. right after the <body>) with an overflow: hidden; in order to avoid vertical scrollbars (caused by some burger menu or whatever). Then, deeper in the DOM you might want to have your sticky element.

In that scenario, you would need to either figure another way to get rid of the vertical scrollbars or use JavaScript to stick the element. It doesn't matter if the container only has its overflow-x set to hidden and not overflow-y; it will mess with the child element's position: sticky anyway.