Bildlauf nach unten bis zur Seite, Bildlauf nach oben bis zum oberen System wie auf einer MEGA.co.nz-Downloadseite
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
Was ich versuche, ist, ein ähnliches System wie beispielsweise die Website von MEGA.co.nz zu erstellendiese Seite.
Grundsätzlich zwei Container, die zwei separate Seiten enthalten. Eins in#top
und der andere in#page
. pagestart
legt fest, ob es mit beginnen soll#top
oder#page
. #top
Hat immer die gleiche Höhe wie das Benutzerfenster (hat also keine Bildlaufleiste). Wenn Sie nach unten scrollen, wenn#top
aktiv ist oder irgendwo auf einen Link klicken,#top
wird über dem Bildschirm nach oben scrollen und#page
wird von unten nach oben scrollen. Und wann#page
ist aktiv (die größer sein kann als das Fenster des Benutzers), und Sie befinden sich oben auf der Seite und rollen immer noch nach oben (oder klicken Sie auf einen Link).#page
wird unter dem Bildschirm nach unten scrollen und#top
wird von oben nach unten scrollen.
Daraus ergibt sich eine Seite, auf der beim Scrollen nach unten eine Animation gestartet wird, die sich bewegt#top
über dem Bildschirm und bringt die#page
und dann können Sie normal scrollen. Und wenn Sie oben auf der Seite sind und nach oben scrollen,#top
wird wieder auftauchen.
Schwer zu erklären, deshalb empfehle ich zu klickendiese und zu sehen, wie MEGA.co.nz es implementiert hat.
Wie kann ich diesen Effekt erzielen?