Vertically stacked sticky headers
I am trying to replicate Twitter's layout.
I have a header menu bar, a side navbar that translates from the left when you click the header menu bar, and a set of tabs [For You, Following].
I want to sticky position all of the above elements to the top such that, as the user scrolls down the page, the elements will remain in their same position.
The problem I have is balancing between keeping the side navbar's height set to 100% of the screen, making sure the side navbar is always on top of the set of tabs [For You, Following], making sure that neither of the components takes up any content space, and avoiding fixed unit values.
Might anyone have any ideas on how to achieve this? I've attached some screenshots for when the sidebar is not opened, and when the sidebar is opened.
4 Replies
If I'm understanding you, you want the top bar and sidebar to be immobile while the main content scrolls, yes?
If that's the case, no need to use positioning! Instead setup the page so you have your header bar as a normal element, and the sidebar/main section as sibling elements in a div that takes up the entire rest of the space. You then put all your main content into the non-sidebar and give it
overflow: scroll; so it becomes a scrollable container.Hmm like Twitter though, I would like the scroll area to be the window itself. Might there be a way to have the main areas scroll area be the window in that case?
you can make both menus position fixed
I don't think that this is actually what you want but I have replicated the general Twiiter layout here in case it helps in any way https://codepen.io/cbolson/pen/JjeEwxO
a horizontally centered version with different responsiveness - https://codepen.io/cbolson/pen/dyQNaOQ