Jump to content
Search Community

Scroll Trigger No End to Trigger

sandman test
Moderator Tag

Recommended Posts

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

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. 

  • Like 2
Link to comment
Share on other sites

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

@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!

 

  • Like 4
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...