I have created a navbar which changes to another navbar on scroll. When on the hero section it shows the first navbar and when scroll out of hero section the other navbar appears. This works fine when first arriving on a page as it’s the top of the page.
The issue is that, if somebody refreshes the page while outside of the hero section, the first nav bar appears. I wish for the second one should show just as it was before page was refreshed. Currently the user must scroll back up to the top to get the interactions working correctly.
Initially I had the interactions on elements within the hero section. The problem with this is that you need to be in the hero section for interactions to take effect. So if you reload the page while scrolled down the bottom, the interactions are still at init until scrolled to the top.
The solution was to put everything but the hero section in to one div block. The interactions were triggered by scroll. I hope this makes sense.