javascript - personalizar - scrollbar material design css

Desplácese hacia abajo a la página, desplácese hacia arriba al sistema superior como en una página de descarga de MEGA.co.nz

Question

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

Lo que intento hacer es crear algo así como el sistema que tiene el sitio MEGA.co.nz, por ejemplo en esta página.

Básicamente dos contenedores, que tienen dos páginas separadas. Uno en #top y el otro en #page . pagestart determina si debe comenzar con #top o #page . #top siempre tiene la misma altura que la ventana del usuario (por lo que no tiene barra de desplazamiento). Cuando se desplaza hacia abajo cuando #top está activo, o hace clic en un enlace en alguna parte, #top se desplazará hacia arriba por encima de la pantalla y #page se desplazará hacia arriba desde la parte inferior. Y cuando #page está activa (que puede ser más alta que la ventana del usuario), y está en la parte superior de la página y aún se desplaza hacia arriba (o hace clic en un enlace), #page se desplazará hacia abajo debajo de la pantalla y #top se desplazará hacia abajo desde la parte superior.

Lo que esto generará es una página en la que cuando te desplazas hacia abajo, comienza una animación que se mueve #top encima de la pantalla y muestra la #page , y luego podrás desplazarte normalmente. Y cuando esté en la parte superior de la página y se desplace hacia arriba, #top nuevo.

Es difícil de explicar, así que es por eso que recomiendo hacer clic aquí y verlo como MEGA.co.nz lo ha implementado.

¿Cómo puedo lograr este efecto?

Answer 1

MANIFESTACIÓN

* Utiliza el complemento de la rueda del mouse de jQuery

Estructura 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);
});