Переполнение скрытой и прокрутки

Question

Я ищу, чтобы создать необычную функцию прокрутки на домашней странице моего сайта, но я не уверен в лучшем способе ее решения.

У меня будет полноэкранная панель (panel 1) наверху (позиция: абсолютная, высота: 100%) с фоновой функцией. Когда пользователь находится в этом разделе, я хочу, чтобы переполнение было скрыто. Когда пользователь пытается прокручивать (с помощью мыши или клавиши со стрелкой), я хочу, чтобы страница скользила вниз (или в этом случае панель скользит вверх по мере ее абсолютного положения). Я бы хотел использовать эффект кубического безье, используя CSS3. Это покажет панель 2. С этого момента переполнение должно быть видимым и должно позволять пользователю прокручивать как обычно. Как только пользователь прокручивается вверх и попадает в верхнюю часть панели 2, я хочу, чтобы переполнение возвращалось в скрытое, а верхняя панель - назад.

Извинения, если это трудно понять, я попытался объяснить это самым ясным способом, о котором я могу думать! Я пробовал играть с waypoint.js, но я уверен, что это необходимо для выполнения этой работы. Эта иллюстрация может помочь сделать мою точку более ясной.

Демо иллюстрации

Я на самом деле нашел сайт, который имеет точный эффект, что я ищу, но я не знаю, как они его создали. http://mariadelaguardia.com/

Answer 1

Вы можете определить, прокрутите вниз до DOMMouseScroll. Вы первый и второй элементы должны быть абсолютными с z-index. Второй div должен находиться в overflow:hidden. После того, как анимация закончена вы поместите вторую Див overflow:auto

var isScrolled = 0; 
 
$('body').bind('wheel', function(e){ 
 
    if(e.originalEvent.deltaY > 0) { 
 
     if(isScrolled == 0){ 
 
     isScrolled = 1; 
 
     $("#header").animate({ 
 
      top:- $("#header").height() 
 
     },1000,function(){ 
 
      $("#content").css({overflow:"auto"}) 
 
      isScrolled = 0; 
 
     }); 
 
     } 
 
    } 
 
    if(e.originalEvent.deltaY < 1) { 
 
     if(isScrolled == 0){ 
 
     isScrolled = 1; 
 
     $("#header").animate({ 
 
      top: 0 
 
     },1000,function(){ 
 
      $("#content").css({overflow:"hidden"}) 
 
      isScrolled = 0; 
 
     }); 
 
     } 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header" style="z-index:1;background:red;position:absolute;width:100%;height:100%;left:0;top:0"> 
 
</div> 
 

 
<div id="content" style="overflow:hidden;z-index:0;background:blue;position:absolute;width:100%;height:100%;left:0;top:0"> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
</div>

UPDATE

Я заменил DOMMouseScroll на wheel. Работайте со всеми браузерами.