Hi!
I want to create a sticky left nav that initially scrolls with page but then becomes fixed on the y axis at a specific point while scrolling down.
Also, because my site is centered aligned, it would be amazing if it could stay within its column while the websites width changes instead of just being fixed along the x axis.
- Maybe there’s a way to “pin” it to a particular element such that is stays still on the y axis but moves relative to the other elements along the y axis…code maybe?
Here is some reference for the stickyness…I also only want it become sticky at a certain point.
Best,
Nathan
http://a-living-theory.webflow.io/find-truth/10-human-elements
https://preview.webflow.com/preview/a-living-theory?preview=a94ce00d956e347412f774b183f9f4e7
1 Like
@nathanphilsteele,
Ah Nathan … you and your navbars, mh 
Set it to position: fixed; and give it an interaction:
initial: move left 100%
give the element you desire the nav should show up another interaction, targeting your nav:
on scroll down: move to origin
hide it by giving yet another element an interaction with move left 100%.
You can also drag in divs and set them to height: 0px; if you don’t want to use your elements because they already have interactions assigned to them.
It is just a little different to like the monkey works here.
Best,
Karl-Heinrich
Ha! Truth @Karl-Heinrich
What I am currently unable to figure out it has to do a fixed position while allowing it to flex horizontally (like the purple monkey). How do you do that?
Is there a tutorial on how they made that purple monkey?
If you look in the right panel on the very bottom, you will see that it’s referencing, “Body” as the target with which to position itself. Is the purple monkey referencing “Body”.
Anyway, this ultimately is the part I am unable to figure out.
I’ve also attached screenshots thinking they may be of help.
showing it staying pinned to left side:
Best,
Nathan
@Karl-Heinrich
Btw, I now have an example of exactly what I’m trying to do…thanks!
I put in a ticket since they’re the ones that made it…they should be able to point me in the right direction.
Best,
Nathan
Hi @nathanphilsteele
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: Screen Recording 2017-04-13...
Hope this is helpful.
Good luck with your project!
All the best,
Anna K
@Anna_Kelian
I feel like I did the best I could describing what I wanted even though it may not of been the best. Thank you for those detailed instructions and example.
In the end, I figured it out, the most important part anyway…the trick was to “auto” left align for a fixed y axis but flexible x xis that stays in its “swim lane”:
I ended up creating something that wasn’t exactly what I wanted but close enough, and I think it looks pretty good.
http://a-living-theory.webflow.io/find-truth/10-human-elements
Thanks again,
Nathan
Hi @nathanphilsteele
Sorry, if I didn’t understand exactly what you wanted to achieve. It is sometimes difficult to put into words what we envision in our heads. However, I’m glad I was able to, at least, stir you in the right direction.
Also, glad you were able to figure out, at least to some extend, how to achieve something close enough to what you wanted.
The website looks stunning 
Is this a personal project or for a client?
Please, let us know when it’s finish by posting in the Show & Tell category. I would appreciate it if you mention me (@Anna_Kelian) there .
Looking forward to seeing the final project!
Good luck and all the best,
Anna K
I appreciate that for sure
It’s a project of my own but I would love to start getting into client work for sure.
I definitely will
Best,
Nathan
1 Like
Hopefully you will get client work soon.
I really love your site and the content. Good job and great work! 
