Streaming live at 10am (PST)

Scroll Into View Interaction ONLY triggering ONCE


#1

Hi,

I am trying to create a dynamic side navigation that follows and shows subsections only when in that specific section of the page. (See the left portion of screenshot below)

I used “scroll into view” triggers to hide/show different subsection list items when specific elements enter the viewport. (e.g. show the Discovery subsection when the first block of text appears, but hide that nav section if you scroll back up far enough that a specific image appears int eh viewport)

Unfortunately, the interactions only trigger the first time! This means, they appear when you scroll down, but they don’t disappear when you scroll back up to hit the other trigger.

I’m not sure why this is happening. How can I fix it so that each interaction triggers EVERY time a trigger element appears on screen?

Thanks


Here is my public share link: https://preview.webflow.com/preview/get-this-portfolio-done?utm_source=get-this-portfolio-done&preview=99967b0ebe00998d4115a7e2c26b232c


#2

Hi @36horgan

So, if I understand this correctly:
You want the content header and sub-headers of each section, to only show when they are in that section?

What do you want to appear when at the top in the first hero section, no navigation at all until scrolled?

Is the idea that you add anchor points to each header so you can click the sub header too and it scrolls to that point?

I have an idea that I’d be happy to share, if this is then end result you’re after. If not, please elaborate more on the desired effect and I’ll happily try and help :smiley:


#3

Hey @magicmark

Correct, I want the content header and subheaders to show up only when in the correct section (So both header and sub-headers would show in the Design section when in that larger portion of the page).

At the top I was trying to set it up so that only the top layer sections/headers would show. That way someone could navigate to a section before drilling down further.

I have added anchor points, but they only seem to trigger the first time an anchor scrolls into view. I would do the “While scrolling on page” interaction, but that doesn’t have a “Hide/Show” ability like the other types of interactions, so that won’t solve the problem.

I’d LOVE to hear how I might be able to fix this so that it triggers every time someone scrolls either down the page OR back up the page.


#4

Having the navigation show for that section when you’re already in that section seems a little user unfriendly to me. Why show a link to get to that section when you’re already there then make it disappear when you leave?

Here’s a video (8 mins) that shows a couple of ideas for your navigation. Let me know how you get on and please feel free to ask any more questions you may have!

CloudApp

Hope this helps a little and gives you some ideas.