I have been working on this for some time. It is quite tricky to make top menu with mobile-like retracting action. I wanted the menu to hide with scroll up and show again with scroll down.
I also wanted another filter element to bump into the menu and stay stuck right under the menu and move with it, but never leave the screen.
The tricky part is that if the menu movement is done with JS, the menu would wiggle. So I had to base the movement on the position:sticky attribute. Then I had to place it in flex element to achieve that the menu first stays on top of the page, then moves with scroll and then fixes it's position again.
The JS is used only to adjust moving room for the elements when the scroll direction changes.
Here is the solution:
Top comments (0)