溢出隐藏和滚动

Question

我希望在我的网站主页上创建一个不寻常的滚动功能，但我不确定解决它的最佳方法。

我将在顶部（位置：绝对，高度：100%）有一个具有背景功能的全屏面板（面板 1）。当用户在此部分时，我希望隐藏溢出。当用户尝试滚动（使用鼠标滚轮或箭头键）时，我希望页面向下滑动（或者在这种情况下，面板作为其定位的绝对位置向上滑动）。我想使用 CSS3 使用三次贝塞尔效果。这将显示面板 2。从这里开始，溢出应该是可见的，并且应该允许用户正常滚动。一旦用户向上滚动并点击面板 2 的顶部，我希望溢出返回到隐藏状态并让顶部面板向下滑动。

抱歉，如果这难以理解，我已尝试以我能想到的最清晰的方式解释它！我已经尝试过使用 waypoint.js，但我确定是否有必要这样做。该插图可能有助于使我的观点更清楚。

演示插图

我实际上找到了一个具有我正在寻找的确切效果的网站，但我不知道他们是如何创建它的。 http://mariadelaguardia.com/

Answer 1

您可以使用DOMMouseScroll 检测是否向下滚动。您的第一个和第二个元素必须是绝对的 z-index。第二个 div 必须在 overflow:hidden 中。动画完成后你把第二个 div 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>

更新

我已将DOMMouseScroll 替换为wheel。在所有浏览器上工作。