Fade-in/out secondary nav bar issue

Hi there,

New Webflow user here, loving it so far.

I am building a website for a client and wanted to build a secondary fade-in/out nav bar. I got the behavior of the nav bar sorted out (as in, it disappears when I scroll down, and appears when I scroll up), but the problem I’m having is about making this secondary nav bar disappear when reaching the top of the page.

I’ve managed to do so through a page interaction and have the nav bar disappear in opacity, but even at opacity 0%, it’s still ‘there’ so I cannot click any of the link underneath it…

I’ve looked at this video (Website interactions and animations | Webflow) that shows how to remove the display of the element through page animation, but it is with the old UI, and cannot find something similar in the new UI.

Here is my project: https://preview.webflow.com/preview/perchance-v2?utm_medium=preview_link&utm_source=designer&utm_content=perchance-v2&preview=34774ac99078e5aea1f9de4548d7cbde&mode=preview

Any help welcome.
Thanks!