Streaming live at 10am (PST)

Interaction trigger on scroll position


#1

How do I define a interaction trigger based on a certain scroll position?

I need to do something like this forum page.
If I scroll down the Webflow Comunity div disappear and just when the scroll is near to the top of the page it does appear again.

The offset attribute that I have on the interaction just give me some offset to the current scroll position and not to the page position. Am I missing something?


#2

Please post your read-only link so the community can take a quick look.


#3

Sorry!

On the project below I wish I could bring the nav bar back to its original color just when the scroll position is below 200px.

https://preview.webflow.com/preview/bestcoffeeshop?preview=a47af0656401eebd79f3933ac0fa581f


#4

Okay when you say 200px?? Please share a screenshot and point to where you would like the nav to change back to transparent. Based on what you’re trying to do, I believe there’s an easier trigger for this. The mental mensa scientific rocket lauch sequence needed for offsets might create a black hole in your personal universe! :crazy_face:

I would just use elements within a section to do the same thing. Like -

Click on Hero-Msg-Title, The authentic Brazilian bakery text frame. Add a Scroll Into View, then choose the Navbar as the target. Add your color changes. OR use the HeroSection as the element and do the same thing.

To me, Scroll Into View is really simple to manage with hidden navbars. What’s your thoughts on that?


#5

Yesterday I tried to achieve that when hero section scroll into view, but did not worked.

Your idea of doing that with the hero-message is great, and I tried to do that now but did not worked. Also I realized that on the desktop, this hero-message div does not scroll out off the view completely if user scroll just a little bit, so I think that the scroll into view will not occur then.


#6

Yep, okay use the brazilian text frame. That’ll work. But I’m curious why the section didn’t work?? It’s your preference, and if you want I can do it for you.


#7

I think I’m doing some misconfiguration for this interaction.
I changed to the hero-msg-title element, but nothing happen to the nav bar when it scroll into the view.


#8

Okay, I can create a video with steps if you want. I’ll need the colors you want onload, onscroll. Up to you.


#9

Thanks Gary!

Nav bar is transparent by default with white font and height 110px. On scroll down it changes to white bg, black font and 60px height.

When scrolling back to the hero section I need it to go back to its original color and height.


#10

This is much easier if you use two navbars. Some like using one but you have to change sooo many elements, to me it’s unnecessary. Which camp are you in? :grin: Do you want one navbar, or does it matter?


#11

One Navbar. I liked the size change animation! :grin:


#12

But thinking a little bit more, maybe using 2 navbars it also solves the navlink current emphasis that stopped working after changing its font color to inherited.


#13

Yeeeaaahup, I’ve tried both and it’s just an easier deal. The only thing is they will need unique classes. Like Navbar 1, Navbar 2. But man, it’s easier. Here, you can follow my collection example and view it in the interactions examples.

https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c

It’ll give you a starting point.


#14

Two Navbars working!
Thanks Gary!


#15

Nice! I like it, good job bud. Glad it worked out. Have a great holiday!


#16

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