Pin navigation to side of the screen in layered setup

[Tomas100 2 Likes (Newbie)]

Hello!

I am making a website like in the codepen. I have the layers functional but I can not figure out how to pin a navigation bar to the side of the screen which would be on top of all the layers sliding on top of each other. So far I have only managed to pin the navigation to the first layer while the second layer is sliding on top of it making it invisible. 
Please let me know if you have any suggestions

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

[Rodrigo 5,034 Likes (Superhero)]

Hi @Tomas100 and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 🥳

 

This example should be what you're looking for:

See the Pen bGVjLwG by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started. Let us know if you have more questions.

Happy Tweening!

[Tomas100 2 Likes (Newbie)]

Thx for the reply Rodrigo!

I have managed to make it work but I want to add a ScrollSmoother as well. As soon as I add ScrollSmoother the navigation is sliding away together with a layer . Is there a way to fix it together with ScrollSmoother? 

Thank you!

[akapowl 5,108 Likes (Superhero)]

 

9 hours ago, Tomas100 said:

As soon as I add ScrollSmoother the navigation is sliding away together with a layer . Is there a way to fix it together with ScrollSmoother? 

 

Here's an explanation for why that happens, and suggestions for how to work around that, from the documentation, @Tomas100

 

https://greensock.com/docs/v3/Plugins/ScrollSmoother

 

Caveats

• position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.

 

[Rodrigo 5,034 Likes (Superhero)]

Yep, @akapowl is right, you need to set your fixed elements outside the smoother container:

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!--- ALL YOUR CONTENT HERE --->
    </div>
</div>
<!-- position: fixed elements can go outside --->

Here is a fork of that codepen example using ScrollSmoother so you can see it in action:

See the Pen oNMRdBX by GreenSock (@GreenSock) on CodePen

 

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

[Tomas100 2 Likes (Newbie)]

Thank you for the help akapowl and Rodrigo! Its all working now