[Solved] Secondary sticky Nav or nav that shrinks on scroll

I’m not sure if this is the most efficient/cleanest way to accomplish this – but I made three floating groups to obtain that secondary nav sticky effect. Two floating headers (that say ‘fixed’) remain in place on the page (so the float setting for both of them is set to ‘nothing’). Then I used a third floating header (hidden on page load) that only becomes visible once the current scrolling position of the page is greater than 100.

Preview:

Editor:

6 Likes