I have a webpage with a header bar across the top. When the content of my page is too wide (typically caused by an embedded object) I would like the header bar across the top to still display across the entire width of the screen. However, when I scroll down on my page, I want this header bar to disappear from view.
Essentially, I want the header to behave like its position is “absolute” when scrolling down, but “fixed” when scrolling right. What is the best way to achieve this?
I tried using position: fixed, position: absolute, and position: sticky without any luck. I also spent some time looking for resources online that address this, but couldn’t find anyone talking about this specifically.
Connor Holcombe is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
Apply position:sticky to the element of choice, and a position that is not static to the most outer scroll container. Make sure all ancestor elements between the scroll container and the element of choice do have static positioning.
Another solution is to use javascript to detect scroll direction, and set the elements position based on that, though I would recommend using CSS first.
I may be able to help further if you could provide a code example.
1