I finally figured it out how to make it work. I removed the position absolute from the section (div) and added a class called .nav-main-positioned to it. This class positions the .nav-main section (div) absolutely with a top offset of 54px. I created another class called .nav-main-scrollup which has a transform translateY property moving the section (div) up to the top of the page. This class is not applied to the section (div) initially.
On the header/hero section in the page template, I added four interactions. The first two remove the class .nav-main-positioned and add the class .nav-main-scrollup after scrolling down the height of the hero section (300px). The two other interactions add the class .nav-main-positioned and remove the class .nav-main-scrollup when the header/hero section enters the viewport. In all four interactions, the class .nav-main is the target.
I did not change any of the header settings in the template settings.
This works well so far. I might just need to add a bit of transition time to make it look a little smoother.