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?

questionAnswers(1)

yourAnswerToTheQuestion