how to pin an element to a specific position

[LSchneiderman]

I want to pin a dropdown menu to a specific spot when my navbar gets pinned to the top. 

 

When you click the "Day 1" element in the navbar, then .dropdownL scrolls down. I need .dropdownL to be positioned absolutely so that it scrolls down directly beneath "Day 1" UNTIL "Day 1" gets pinned to the top of the screen. At that point, I want .dropdownL to have a position: fixed, top: 50px and left: 2.5vw.

 

How do I set the pin position to this very specific spot please?

 

 

See the Pen MWzLExP by lschneiderman (@lschneiderman) on CodePen

[Rodrigo]

Hi,

 

I think the best approach is to pin the entire container of the menu, since the dropdown is not a child of of the navbar element.

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

 

Another option is to move the dropdown into the navbar and keep only that first ScrollTrigger instance.

 

Hopefully this helps.

Happy Tweening!

[LSchneiderman]

That was it! Thank you, @Rodrigo!