Jump to content
Search Community

how to pin an element to a specific position

LSchneiderman test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...