溢出隐藏和滚动

Question

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

我将在顶部有一个全屏面板（面板1 ）（位置：绝对，高度：100％），并带有背景功能。当用户在此部分时，我希望隐藏溢出。当用户尝试滚动（使用鼠标滚轮或箭头键）时，我希望页面向下滑动（或者在这种情况下，面板向上滑动，因为它位于绝对位置）。我想使用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。适用于所有浏览器。