Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ScrollTo and Superscrollorama #13

Closed
AccurateDesign opened this issue Nov 8, 2012 · 6 comments
Closed

ScrollTo and Superscrollorama #13

AccurateDesign opened this issue Nov 8, 2012 · 6 comments
Labels

Comments

@AccurateDesign
Copy link

I read the issue from a while ago, but I don't really understand.

Could you show a quick example?

Thanks :)

@tlartaud
Copy link

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
Copy link
Author

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

Thanks :)

@tlartaud
Copy link

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
Copy link

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

@janpaepke
Copy link
Collaborator

Now you can use the method "setOffsetPosition".

@SgtPooki
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants