向下滚动到页面，向上滚动到顶部系统，就像在MEGA.co.nz下载页面 [英] Scroll down to page, scroll up to top system like on a MEGA.co.nz download page
问题描述
var pagestart = 0;
var currentat = 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
} {
$（'＃top'）。css（'top'，$（window）.height（））hide（）;
}）;
}
}
if（pagestart == 0）{
$（'＃top'）。css（'height'，$（window）.height（））;
$ '#page'）。hide（）;
}
else
{
$（'＃top'）。hide（）;
$ '）.css（'height'，$（window）.height（））;
}
$（window）.scroll（function（）{
if == 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 allways与用户窗口具有相同的高度（因此没有滚动条）。当您在 #top 处于活动状态或向下滚动时，向下滚动，或者点击某处的链接， #top 和 #page 将从底部向上滚动。当 #page 处于活动状态时（可能高于用户窗口），并且您位于页面顶部，然后仍向上滚动（或单击链接）， #page 将向下滚动到屏幕下方， #top 将从顶部向下滚动。
这将导致一个页面，当您向下滚动时，动画开始移动屏幕上方的 #top 然后点击 #page ，然后就可以正常滚动了。当您在页面顶部并向上滚动时， #top 会再次弹出。
很难解释，所以为什么我建议点击这，并看到它作为MEGA.co .nz已经实现了。
如何实现此效果？
*使用 jQuery鼠标滚轮插件
HTML结构
div id =wrapper>
< div id =splash>
< div id =splash-footer>显示内容< / div>
< / div>
< div id =content>
< div id =content-header>显示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
/ *滚动事件* /
$（＃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）;
}
}
/ *点击事件* /
$（＃splash-footer）。on（click，function（）{
$（'＃splash'）。 animate（{
height：0
}，500）;
}）;
$（＃content-header）。on（click，function（）{
$（'＃splash'）。animate（{
height：'100％'
}，500）;
}）;
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
What I'm trying to do is create sort of like the system the site MEGA.co.nz has, on for example this page.
Basicly two containers, wich hold two seperate pages. One in #top, and the other one in #page. pagestart determines if it should start with #top or #page. #top allways has the same height as the users window (thus having no scrollbar). When you scroll down when #top is active, or click a link somewhere, #top will scroll up above the screen and #page will scroll up from the bottom. And when #page is active (wich can be taller then the users window), and you're on the top of the page and then still scroll up (or click a link), #page will scroll down below the screen and #top will scroll down from the top.
What this will result into is a page where when you scroll down, an animation starts wich moves #top above the screen and brings up the #page, and then you'll be able to scroll normally. And when you're at the top of the page and you scroll up, #top will pop up again.
Hard to explain, so that why I recommand clicking this and seeing it as MEGA.co.nz has implemented it.
How can I achieve this effect?
*Uses jQuery mouse wheel plugin
HTML structure
<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);
});
这篇关于向下滚动到页面，向上滚动到顶部系统，就像在MEGA.co.nz下载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
