Show a navbar once a user scrolls

I watched this turtorial, but am unable to get mine to work. The issue is this tutorial doesn’t show how to make the entire navbar from scratch so I am not sure what they are referencing when they talk about class names.

Here is my page structure

-Hero_Section is actually the container of my nav.
—Navbar is the navbar I dragged in from the webflow components
-----Contianer hold my logo and nav links
-Header is actually my Hero content (the very top of my webpage)
—Container holds all the header content

What I need is for Hero_Section not to be shown when the page loads but as soon as Header goes off screen I want it to show.

I was able to do the “Display None” part of the video tutorial, but after that I get lost and nothing works as expected. When I try to setup like the video and I scroll, my Header view is what seems to appear or disappear, not the Hero Section.

Any suggestions?

I bought the QAPP template thinking I could COPY out of it and put it in my design, but nope. Not sure why Webflow has done that yet? Allow me to make a symbol show up in their + component panel.