Jump to content
Search Community

First scrollTo

mikel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi experts,

 

It's a little strange: Only the first scrollTo (button on hero) does not land correctly. After that, everything works as desired.

 

Everything is fine in the test case:

 

See the Pen BVNqxL by mikeK (@mikeK) on CodePen

 

In the finished web https://www.mandantum.com however not. I checked a lot.
But do not find the mistake that I have 'built in'.

 

Small hint, where to look, would be nice.

Mikel

Link to comment
Share on other sites

In Safari 11 MacOS 10.13.6, I do see it on https://www.mandantum.com when clicking on "Ihr Projekt braucht Unterstützung ?" (as an example). First click scrolls to a lower position than any subsequent clicks which scroll to a higher (I assume "correct") position. Haven't picked apart the code yet ... because I just want to be sure this is specifically where you are seeing the isse, @mikel.

 

 

  • Like 2
Link to comment
Share on other sites

Hi friends,

 

@Shaun Gorneau : yes 'First click scrolls to a lower position than any subsequent'.

 

@GreenSock,  @PointC : Did that replace <a> with <div>. Locally the same phenomenon.

 

@Jonathan : CHROME / Windows. SAFARI shows me this 1st click mistake too.

 

Lets think about a loader doing the first 'run'.

Maybe scrollTo needs a little time to get to the right point.

 

Best regards

Mikel

 

Link to comment
Share on other sites

Sorry, I thought we were looking at the harsh jump so I thought the <a> tags were the problem.

 

I think the wrong position on first click is because of the 'fixed' setting on the .nav. In your CodePen demo you have the .nav set to position:fixed in your CSS. As far as I can tell on your live site, the .nav is set to relative in your CSS. It tweens to position: fixed upon the first window scroll and stays that way so all subsequent clicks and scrolls are landing correctly.

 

I think by setting that .nav to position:fixed in your CSS, it should fix your issue.

:)

  

  • Like 4
Link to comment
Share on other sites

Hi @PointC,

 

Great job. Thanks!  https://redmax.hamburg/MANsolved/

 

The .nav was fixed too, but that only happened after the 1st scrollTo started.

 

if($(window).width() >=600 ){	
	$(window).scroll(function(e) {
	  var scroll = $(window).scrollTop();
	  if (scroll > offset_Wert-nav-30) {
		TweenLite.to('.nav',0.5,{autoAlpha:1, position:"fixed"})
	  }else{
		TweenLite.to('.nav',0.5,{autoAlpha:0})
	  }
	}); 
}
else if ($(window).width() <600 ){
	TweenLite.to('.nav',0.5,{autoAlpha:1, position:"fixed"})	
	TweenLite.set('#section1',{marginTop:'75px'})
}	


Best regards
Mikel

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