sandman Posted June 10, 2020 Share Posted June 10, 2020 Hello, I'm creating a sticky header using pin:true and I have the nav bar set as the trigger and the start position as "top 0px" I'd like the nav bar to stay pinned but I don't know how to set the end trigger to none. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted June 11, 2020 Share Posted June 11, 2020 Well you could just use a very large number like end: "+=99999" or if you want to be exact, you could do end: ScrollTrigger.maxScroll(window) to get the maximum scroll value. Does that help? If you just want it to remain pinned the whole time, why not just use position: fixed in your CSS and skip ScrollTrigger altogether? Don't get me wrong - I'm certainly an advocate for ScrollTrigger but it's intended to do much more advanced stuff and if you're only using it to pin something the entire time, it seems like position: fixed in CSS is far simpler. 2 Link to comment Share on other sites More sharing options...
nvatland Posted June 11, 2020 Share Posted June 11, 2020 I’m not sure if it’s best practice, but I used endTrigger: “footer” and end: “bottom top”. This way no matter how tall my page is the element will be pinned. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 11, 2020 Share Posted June 11, 2020 10 hours ago, GreenSock said: If you just want it to remain pinned the whole time, why not just use position: fixed in your CSS and skip ScrollTrigger altogether? Don't get me wrong - I'm certainly an advocate for ScrollTrigger but it's intended to do much more advanced stuff and if you're only using it to pin something the entire time, it seems like position: fixed in CSS is far simpler. Most likely he doesn't want it fixed at the very top. position: sticky would be better in that case. Link to comment Share on other sites More sharing options...
sandman Posted June 11, 2020 Author Share Posted June 11, 2020 @GreenSock I was thinking about all these solutions and decided to go with one similar to @nvatland, only I used endTrigger:"html" end:"bottom top" This way I don't have to rely on the footers position. On why I wanted to use ScrollTrigger, I was already loading it into the page, and the sticky css was not working properly on the mobile device browser. If I simply used fixed position for css I still needed to adjust the rest of the page for the difference in height for the header. ScrollTrigger seems to do this for me. Also, If I want to animate the header I now have options. Thanks for all the help and the quick feedback! 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 11, 2020 Share Posted June 11, 2020 4 minutes ago, sandman said: endTrigger:"html" end:"bottom top" Clever 👍 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now