I’d like to make a navbar menu which is positioned under a section (position: auto) but will get sticky when scrolled down (position: fixed). Is there a way to do this without JS? I thought about making two menus (one auto and the other fix to top) and use interaction to make them show/hide, but then I’ll have two different menus, which is not nice. Any better idea?
You can use 2 menus, that’s not a problem. It’s not uncommon, so you’re on the right track. There are a number of ways to accomplish it. But I would use 2 menus, with 1 starting 0%, etc. of course. Let’s say you have these menus as symbols and you want to create the interaction. The interaction can’t be on the symbol, so you use the hero section and affect the hidden menu only, on a simple scroll into view/out of view, and you’re done. Now when you go to another page, if you use Legacy interactions, you simply add it to another section.
Honestly, this process is a personal preference on the maintainence, location of section interaction, etc.
