Przewiń w dół do strony, przewiń do góry systemu, jak na stronie pobierania MEGA.co.nz
var pagestart = 0;
var currentlyat = pagestart;
var lastScrollTop = 0;
$(document).ready(function(){
function scrollPageTo(a){
if(a == 0){
$('#top').show();
$('#top').animate({
top: 0
}, 1000, function(event){
$('#page').css('top', $(window).height()).hide();
});
}
else
{
$('#page').hide();
$('#page').animate({
top: 0
}, 1000, function(event){
$('#top').css('top', $(window).height()).hide();
});
}
}
if(pagestart == 0){
$('#top').css('height', $(window).height());
$('#page').hide();
}
else
{
$('#top').hide();
$('#page').css('height', $(window).height());
}
$(window).scroll(function(){
if(currentlyat == 0){
if(($(this).scrollTop() < lastScrollTop) && $(this).scrollTop() == 0){
scrollPageTo(1);
}
}
else
{
if(($(this).scrollTop() > lastScrollTop) && $(this).scrollTop() == 0){
scrollPageTo(0);
}
}
});
});
http://jsbin.com/uZiDaXud/1/edit
Próbuję stworzyć coś w rodzaju systemu, w którym znajduje się strona MEGA.co.nz, na przykładto strona.
Zasadniczo dwa pojemniki, które posiadają dwie oddzielne strony. Jeden w#top
, a drugi w#page
. pagestart
określa, czy powinien zacząć#top
lub#page
. #top
zawsze ma taką samą wysokość jak okno użytkownika (nie ma więc paska przewijania). Kiedy przewijasz w dół, kiedy#top
jest aktywny lub kliknij gdzieś link,#top
przewinie się w górę nad ekranem i#page
przewinie się od dołu. I kiedy#page
jest aktywny (może być wyższy niż okno użytkownika), a ty jesteś na górze strony, a następnie wciąż przewijasz w górę (lub klikasz link),#page
przewinie w dół pod ekranem i#top
przewinie w dół od góry.
Efektem tego będzie strona, na której po przewinięciu w dół rozpocznie się animacja, która się porusza#top
nad ekranem i wyświetla#page
, a następnie będziesz mógł normalnie przewijać. A kiedy jesteś na górze strony i przewijasz w górę,#top
pojawi się ponownie.
Trudno to wyjaśnić, dlatego polecam klikanieto i widząc to jako zaimplementowane przez MEGA.co.nz.
Jak mogę osiągnąć ten efekt?