Hide navbar on scroll without complex JS/CSS coding

I am trying to workout a way to hide the navbar on scroll (more specifically, hide when the user scrolls down and reveal when scrolling up). It seems like there is a simpler way than the tutorial on YouTube, which requires some complex React component coding.

I have a setup here where I have variant of the page where the navbar transitions out of view, but can’t seem to get it to work using the ‘On scroll’ interaction feature. Is this a matter of having to define some code in the 'When…" option, as opposed to ‘Always’? If so, what would that be? Shouldn’t the ‘On scroll’ feature handle that code for me? Or do I still need to write something? See screenshot, as it stands, it doesn’t work: