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