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网站的系统,例如this页面。
基本上是两个容器,包含两个单独的页面。一个位于#top
,另一个位于#page
。 pagestart
确定是否应以#top
或#page
开头。 #top
始终与用户窗口具有相同的高度(因此没有滚动条)。当您#top
处于有效状态时向下滚动,或点击某处的链接时,#top
会向上滚动到屏幕上方,#page
将从底部向上滚动。当#page
处于活动状态时(可能比用户的窗口更高),并且您位于页面顶部,然后仍向上滚动(或单击链接),#page
将向下滚动在屏幕下方,#top
将从顶部向下滚动。
这将产生一个页面,当您向下滚动时,动画开始在屏幕上方移动#top
并调出#page
,然后您将能够正常滚动。当您位于页面顶部并向上滚动时,#top
将再次弹出。
很难解释,因此我建议点击this并将其视为MEGA.co.nz已实施的原因。
我怎样才能达到这个效果?
答案 0 :(得分:5)
HTML结构
<div id="wrapper">
<div id="splash">
<div id="splash-footer">Show content</div>
</div>
<div id="content">
<div id="content-header">Show splash</div>
<div><!-- content here --></div>
</div>
</div>
<强> CSS 强>
/* css normalized */
html, body {
height:100%;
width:100%;
overflow:hidden;
}
#wrapper {
height:100%;
}
#splash {
position:relative;
background-color:#cce;
height:100%;
}
#splash-footer {
position:absolute;
bottom:0;
width:100%;
}
#content {
position:relative;
height:100%;
overflow:auto;
}
#content-header {
position:absolute;
top:0;
width:100%;
}
<强>的jQuery 强>
/* scroll events */
$("#splash").on("mousewheel", function (e) {
if (e.deltaY <= 0) {
$('#splash').animate({
height: 0
}, 500);
}
});
$("#content").on("mousewheel", function (e) {
if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
$('#splash').animate({
height: '100%'
}, 500);
}
});
/* click events */
$("#splash-footer").on("click", function () {
$('#splash').animate({
height: 0
}, 500);
});
$("#content-header").on("click", function () {
$('#splash').animate({
height: '100%'
}, 500);
});