Jump to content
Search Community

Fixed Position + Anchors Links not Working with GSAP + ScrollTrigger + ScrollToPlugin (smooth scroll)

Shehzad Asif test
Moderator Tag

Recommended Posts

Hy there, 

I am new to GSAP. The problem is I want my navigation to be fixed on top. I am using asscroll smooth scroll with GSAP + ScrollTrigger + ScrollToPlugin. The problem is, if I put navigation outside smooth scroll container then position fix works but anchors link does not work correctly. If I put navigation inside smooth scroll container then fix position does not work but anchors link work correctly. Pls have a look at the codepen for better under standing. Just move the navigation inside or  outside of the asscroll-container to see the problem.

I tried my best to get the solution but could not come up with it.

I really look forward to you guys if any one could help me out.

Regards,

Shehzad Asif 

See the Pen zYqpgzz?editors=1000 by ShehzadAsif (@ShehzadAsif) on CodePen

Link to comment
Share on other sites

Hey Shehzad and welcome to the GreenSock forums. 

 

Your navigation should indeed be outside of the smooth scroll container. However you can't use the normal href #id links to navigate to the content because smooth scrolling requires that you hijack the native scroll position. What you should use instead is calculations of where the content is in the scroll position and then use either the smooth scrolling libraries scroll position setter method of ScrollTrigger's scroll position setter method (making sure to hook it up to the smooth scrolling library's scroll position setter method). You can't animate the window itself. Does that make sense?

 

See the Pen ZEWryWw?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hy ZachSaucier,

 

Thanks for your quick and prompt response and to provide solution to my problem. I really appreciate.

One thing I did after reading your reply (as you mentioned it does not work with "href="#id") it clicked my mind and I decided to give it a try and removed the "href" links from navs. It worked even without putting any extra code. I revised my demo linked above (just removed the "href" links from nav, nothing else). What do you think. It may be helpful to others.

 

Regards,

Shehzad Asif

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...