ScrollTo and Superscrollorama

[johnpolacek]

ScrollTo and Superscrollorama

[tlartaud]

Hi,

If you use some Pins functions, that will modify the global height of your document when you scroll, you will need to reclaculate the reall value of the scrollto.

For example:
A site contains 3 sections.
Your are on the top of the page (1rst section), and you want to click a link to scrollto the 3rd section.
Unfortunaly, you added a pin function to the second section.
So when you click the link, at this time, the scrolltop value of the 3rd section is simply $('#3rd_section').offset().top;
When the scrolling arrives on the 2cnd section, the pin function will apply, and the second section height will change. So the 3rd section top values will changes.
To fix it, you have to calculate the real top position of the 3rd section, which is:
$('#first_section').height() + $('#2cnd_section #container_div').height()

Hope it helps.
Cheers

[AccurateDesign]

could you show a demo please? I am a beginner in javascript

Thanks :)

[tlartaud]

Of course.
Site is in developpement. Still some bugs.

http://www.thomaslartaud.com
Scroll down a bit, and try to click on 'portfolio'.
The processus section is a pinned one, but when you click on portfolio, the real value is calculated on mysc script, because i know that the processus section will be pinned during the scroll.

here is the code that might interest you:
$('#menu_portfolio').click(function(e){
e.preventDefault();
if($(document).scrollTop()<$('#portfolio').offset().top){
TweenMax.to($('body'), 4, {scrollTop:$('#processus').offset().top+$('#processus_list ul').height()+$(window).height()+410});
}else{
TweenMax.to($('body'), 4, {scrollTop:$('#portfolio').offset().top+10});
}
});

I also added a test to know where i am on the page when i click the menu, because the value will be diffrent so.
Dont care about +410 and +10. This is the margin values of my div which are not included in the height() property.
You will also need to add +$(window).height() when you scroll from top, of course.

This code is actually not 100% working on my website, because i made a lot of changes in the processus section, but it show you how to think about it.

Cheers

[CuldeSac]

Hi i'm having the same kind of issue would this work if the pinned section is 100% height of the browser?

[janpaepke]

Now you can use the method "setOffsetPosition".

[SgtPooki]

setOffsetPosition doesn't exist as far as I can tell.

I am also experiencing an issue when I use window.scrollTo(x,someY); because I am manually editing multiple backgrounds and spacer elements.