I have a “sidecontent” area on a site. It’s position:fixed on the lefthand side.
There is a “scrolled-up” header with a height of 150px, and a “scrolled down” header with a height of 80px.
This issue is that between the two headers, a gap is created between the bottom of the header and the top of the sidecontent.
Is there a good way to fix this?
The best I can come up with is to set a variable of the current scroll position and base the sidecontents position on that, maybe? I’m a JS plebian, so forgive my ignorance.
When the scrolled down header is in effect modify the JS to toggle a class to the sidebar and use that class in css to set the different top position for the sidebar. (Assuming you can rely on a fixed height of the header and it doesn’t change height when resized etc.)
Do you have a link to the page in question so we can see what you have at present?
There are many ways that these headers can be implemented and some only appear when you stop scrolling and some only appear when you start scrolling back up.
I’m guessing that your large header scrolls away when you start scrolling down the page and a smaller sticky header slides down instead. Therefore you want the top of your fixed side navigation to move up and fill the extra space when the smaller header appears. The easiest way would be to add class as I suggest and move the top of the sidebar when the smaller header is in place.
Here’s a quickly adjusted old demo using the class swap as I suggested.
If instead you wanted the fixed sidebar to constantly monitor the header height then that would be more complex to code (and time for a js guru to step in ) .
) .