When creating Interactions, it is a good practice to outline what you're trying to achieve before you start creating the interaction in Webflow. Actually, it's a good practice to do this with the whole project.
Now, in this particular interaction, I can see that you are trying to have a sidebar of anchor links appear and stay fixed in only one long section of your page.
What does this mean?
This means that we have a
Navbar that appears and stays
fixed on the
left of the screen as long as we are scrolling through the
middle section of your page only, correct?
To achieve this:
What do we need: a
Navbar of links stacked vertically, so we use flexbox to achieve that.
Where do we want it:
fixed to the
left, so it's not relative to any other section, but to the viewport. Simply add position
fixed and adjust the settings appropriately.
Where we don't want it: The
navbar should appear and stay fixed only when we are scrolling the middle section of the page i.e. it should not be visible when we're scrolling the into section and the same for the footer.
How can we achieve this:
There are many ways we can achieve this. One way would be:
- Have the into section in one section/div and the footer separately as well.
- Hide the
navbar we created
- Create a scroll trigger interaction that affects the navbar.
Be careful to set
Display:Flex instead of _Display: block when you want the Navbar to appear._
Of course, you can play more with it to have a specific animation instead of the simple show and hide I'm using here.
- Assign the interaction to both the intro section and the footer(since it is a symbol, double click it to select the actual section/div so you can assign the interaction).
It will look somewhat like this: https://cl.ly/3I1l2U1S3c3o
Hope this is helpful.
Good luck with your project!
All the best,