Прокрутите вниз до страницы, прокрутите вверх до верхней системы, как на странице загрузки 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
Что я'я пытаюсь создать систему, похожую на сайт MEGA.co.nz, например,этот стр.
В основном два контейнера, которые содержат две отдельные страницы. Один в#top
и другой в.#page
pagestart
определяет, следует ли начинать с#top
или же .#page
#top
всегда имеет ту же высоту, что и пользовательS окно (таким образом, не имеет полосы прокрутки). Когда вы прокрутите вниз, когда#top
активен, или нажмите ссылку где-нибудь,#top
прокрутите вверх над экраном и#page
прокрутить снизу вверх. И когда#page
активен (который может быть выше, чем пользовательокно), а тыв верхней части страницы, а затем по-прежнему прокрутите вверх (или нажмите ссылку),#page
прокрутите вниз под экраном и#top
прокрутить сверху вниз.
Это приведет к странице, на которой при прокрутке начинается анимация, которая перемещается#top
над экраном и поднимает#page
и тогда тысмогу прокрутить нормально. И когда тыв верхней части страницы, и вы прокрутите вверх,#top
появится снова
Трудно объяснить, так чтопочему я рекомендую нажатьэтот и увидев, как MEGA.co.nz это реализовал.
Как я могу добиться этого эффекта?