Streaming live at 10am (PST)

Scroll Interaction Problem

I was trying to figure out how to change the background of the navbar when the hero section of this Site moves out of view
I figured out that it could be done with a div positioned behind the navbar which turns to display:block when the hero section moves out of view…
I’ve set up the interactions but the thing just won’t work…
Could you help me please?

You’ve put a div for your background but set no dimensions nor add content to it. It shows up in the designer because Webflow keeps a default size for you to work with elements, but everytime you press “preview”, the div disappears because it has no dimensions. So your interaction kind of works but you can’t see it. Add a height in pixels to your bg div and test again. You’ll see that it works but you have to rework it, the div needs to be hidden by default and displayed by the interaction.

Thanks man!
I would’ve never have figured that out without your help…
And this thing bugged me the whole night too… :sweat_smile:

BTW any advice for the website… ?

Well it will be easier when you add some uique content to it (: You backgroudn hero needs better placement (use Poster option). If you keep helvetica… well be aware that it’s very specific, recognisable. As your fonts are an important element of your design, you can spend a bit of time to identify one that’s more unique, that will give more character to your page.

Come back when it’s full of stuff (:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.