Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

First pined element make a jump #60

Closed
gagarine opened this Issue · 19 comments

5 participants

@gagarine

if the first things you have is a pinned element you will have some kind of ugly jump.

This is because when the user start scrooling the element will pass to position:fixed but the browser take some time to readjust everything.

I don't know the best way to fix that. On my project I initilise the element in position:fixed and use the onUnpin callback to set it back to position:relative.

I open a bug because I have the impression the logic can be a bit better even I didn't dig enough to provide a pull request.

@janpaepke
Collaborator

Hi Gagarin,

please provide a demo of this bug.
Thank you.

regards,
Jan

@janpaepke janpaepke was assigned
@gagarine

Hi,

So I add the problem on https://face-it.ch/fr/mission/congo . I was fixed on https://face-it.ch/js/mission-congo.js by adding:

$('#chap1').css('position','fixed').css('z-index','100');

and

 onUnpin: function () {
       $('#chap1').css('height', _height).css('position','relative').css('z-index','');
 }
@janpaepke
Collaborator

Ho do you think we should implement a general fix for this into superscrollorama?

@gagarine

I don't know... the pinned element method can certainly be improved. Perhaps every spacers should be calculated and in the dom before the element is actually pinned.

But I don't have time to work on that sadly.

@techiesplus13

Hello janpaepke

I'm having the same problem! You can see our new website at http://techiesplus.com. It still is work in progress.
When using the scroll bar of the browser it will make a huge jump to the beginning of the webpage.

@janpaepke
Collaborator

Hi @techiesplus13,

I think what you're describing is a situation I described at length here: #29

The workaround for now is set push-followers to false and add an element that is high enough to pass the pin.

Is this the same issue you were describing @gagarine?
Until now I thought you meant something else...

lg J

@techiesplus13

If i make the push-followers to false then it will never unpin by scrolling down and if i have something under the pinned div i will never see it. Right?

@janpaepke
Collaborator

No, that is wrong. It merely means that the elements that are below the pinned element will not be pushed down for the duration of the pin. that means if you don't have a big enough spacer you will scroll past the elements that come after the pinned one.

@techiesplus13

Oh ok! I understand! So if i have a duration of 1000px i will need a spacer of 1000px or longer for it to unpin and see the rest of the page? Thanks by the way! Scrollorama is awesome! Keep up the good job!

@janpaepke
Collaborator

Both statements are correct! :)
and we will...

@techiesplus13

Jan i did what you said! But something is wrong! Now it works perfect using the scroll bar but only for the first time. If you scroll down it will pin perfectly and keep scrolling and it will unpin perfectly too. But when you try to do it again without reloading the page the problem starts again. Please check my website http://techiesplus.com

@techiesplus13

Something is not ok!

@janpaepke
Collaborator

Hi,

I took a rough look and It's difficult to figure out what even happens there.
Try to disable superscrollorama and see how the page behaves without it. (I suspect some errors in the dom, cause at the start there is a horizontal scroll bar).
If you have further questions please start a new issue, as your problems are usage questions and now about the bug described by @gagarine.

regards,
Jan

@gagarine

One things to keep in mind is than using a big element under the pinned element is not that easy with responsive design.

@janpaepke
Collaborator

Good news, everyone! :)

A solution might be near! Check it out: #94

regards,
Jan

@goco17

Hi, Guys

Is there any solution regarding this bug, because i'm going the same problem, my pinned elements are making a weird jump

Thank you

@janpaepke
Collaborator

Do you pin something right from the start?
If so, make sure the trigger position is not a negative value.

This could happen if for example you have triggerAtCenter set to true and the pin element is positioned at the top of the body.
So if you start scrolling the script realizes "wait a sec - i should have been pinned for a while" and jumps to the center.

regards,
J

@jkrot
@janpaepke
Collaborator

Hi Guys,

I'm closing all bug issues for Superscrollorama because it has been superceeded by ScrollMagic.
https://github.com/janpaepke/ScrollMagic

Please check if updating helps fix your problem.
If not, please post a new issue in the ScrollMagic issue section.

best regards,
Jan

@janpaepke janpaepke closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.