向下滚动到页面，向上滚动到顶级系统，就像在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(0); } } }); });
我想要做的是创建类似于MEGA.co.nz网站的系统，例如这个页面。
基本上是两个容器，两个单独的页面。 一个在#top ，另一个在#page 。 pagestart确定它是否应以#top或#page 。 #top总是与用户的窗口具有相同的高度（因此没有滚动条）。 当#top处于活动状态时向下滚动，或者在某处单击某个链接时， #page将向上滚动到屏幕上方， #page将从底部向上滚动。 当#page处于活动状态时（可能比用户窗口更高），并且您位于页面顶部然后仍向上滚动（或单击链接）， #page将向下滚动屏幕下方和#top将从顶部向下滚动。
这会产生一个页面，当你向下滚动时，动画开始在屏幕上方移动#top并调出#page ，然后你就可以正常滚动了。 当您位于页面顶部并向上滚动时，＃top将再次弹出。
很难解释，这就是为什么我建议点击这个并将其视为MEGA.co.nz实施它。
我怎样才能达到这个效果？
DEMO
*使用jQuery鼠标滚轮插件
HTML结构
Show splash
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); });