向下滚动到div这个洞的时候怎么淡出一个div，就不会再显示了

How can I fadeOut a div when I scroll down to the hole div, It will not show again

我希望实现一项功能，在该功能中，点击按钮（或其他元素）时通过 slideDown 在页面顶部显示通知，然后通过 fadeOut 隐藏通知被滚出视野。此功能类似于在 airbnb's website 上单击 "How It Works" 时发生的情况。

为清楚起见，以下是我正在寻找的功能：

  1. 点击指定元素显示通知
  2. 通知滑入页面顶部的视图，window 自动滚动到顶部
  3. 用户向下滚动页面，通知元素一滚出视图就淡出

有人知道如何实现吗？

抱歉，代码乱七八糟，但它明白了要点。 

$(document).ready(function() {
  $("#slideDiv").click(function() {
    $("#banner").show().animate({height: "300px"}, 0);
  });
  
  $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    
    var link = $("#banner");
    var offset = link.offset();
    
    var top = offset.top;
    var bottom = top + link.outerHeight();
   
    if(scroll > bottom) {
      link.hide().css({height: 0});
      window.scrollTo(0, 0);
    }
  });
});

#banner {
  height: 0px;
  width: 100%;
  display: inline-block;
  background: #eee;
  transition: height 0.5s;
}

<!DOCTYPE html>
<html>

  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>

  <body>
    <div id="banner">
      
    </div>
    
    <a href="#" id="slideDiv">test</a>
    
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit sapien quis augue blandit faucibus. Nullam ac purus cursus turpis tempus blandit. Maecenas quis diam turpis. Integer metus ligula, pulvinar nec arcu et, tempor lobortis nunc. Integer in nunc in mi bibendum bibendum. Sed consectetur congue nibh id egestas. Quisque maximus, eros vitae mattis tempus, magna sem varius turpis, non accumsan ex velit nec mauris. Duis cursus commodo mi commodo facilisis. Donec turpis ante, gravida aliquet molestie porttitor, semper nec dolor.

Maecenas sed porta dui. Quisque vulputate tortor sed varius maximus. Ut eget mi eleifend, finibus ligula vel, malesuada diam. Etiam ultrices magna vitae condimentum sagittis. Maecenas tempor pellentesque lectus, eget ultricies ante maximus vestibulum. Phasellus molestie placerat dolor sit amet fringilla. In elit enim, vulputate quis varius eu, egestas nec nulla. Nulla congue eros vel nibh molestie sagittis. Mauris faucibus tellus at justo porta tincidunt. Vestibulum convallis ex et sapien placerat finibus. Nulla aliquam luctus tortor at dapibus. Phasellus semper orci eget magna egestas laoreet. Maecenas ut ligula egestas, lobortis enim efficitur, sollicitudin odio.

Phasellus porttitor mauris ut erat commodo, at bibendum massa ullamcorper. Nunc facilisis est eget sagittis gravida. Nulla eget augue semper, accumsan leo ac, sollicitudin tortor. In mi tortor, porta ac libero pretium, mollis fringilla massa. Maecenas auctor nibh ligula, vel varius nisl porta eget. Cras consectetur aliquet commodo. Aenean in tincidunt augue, non finibus mauris. Pellentesque rhoncus iaculis leo. Integer pellentesque tellus at tincidunt bibendum. Nullam vehicula pretium malesuada. Praesent in nulla posuere, auctor risus sed, volutpat ligula.

Nunc consectetur at ante eu pharetra. Nullam at augue hendrerit, laoreet erat vitae, maximus massa. Donec purus felis, varius lacinia ex vel, gravida aliquet arcu. Phasellus a ipsum nec odio convallis porttitor. Phasellus molestie lorem at aliquam sagittis. Aliquam sed ultricies nunc. Pellentesque vitae tincidunt ante, sit amet condimentum felis. Proin imperdiet, tellus eu vehicula interdum, libero augue sagittis nibh, in luctus neque turpis ac enim. Fusce iaculis semper lacus, non condimentum neque cursus in. Suspendisse rhoncus lectus eleifend purus consectetur, eu placerat felis tempus. Fusce turpis tortor, scelerisque ullamcorper tellus ac, iaculis viverra risus. Aenean varius mollis nisi, at euismod tellus. Integer ullamcorper ipsum eget nisi rhoncus finibus. Quisque eget commodo ex, pretium vehicula dui. Integer sed feugiat tellus. In hac habitasse platea dictumst.

Nunc risus elit, rutrum ac nisi in, gravida vestibulum nunc. Duis sodales blandit nisl, in condimentum nisi facilisis at. Nulla eleifend pulvinar libero, et congue sem molestie ut. Sed sollicitudin, neque quis iaculis vehicula, sapien dolor ornare nibh, nec placerat diam dui a leo. Nullam ut semper eros. Etiam vitae quam consequat, molestie ligula id, tincidunt ipsum. Proin ullamcorper malesuada faucibus. Nunc molestie in neque quis ultricies. Proin non diam non sapien tristique viverra.

Aenean sagittis metus eget mi ullamcorper accumsan. Maecenas in ex at arcu porta pellentesque gravida ut arcu. Nulla mattis sagittis erat eu pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus metus vel nulla eleifend, eu lacinia augue aliquam. Fusce id nisi quis tortor ultrices egestas non gravida dui. Aliquam volutpat aliquam felis, ac commodo felis venenatis nec. Duis interdum, est a sollicitudin commodo, turpis mauris consectetur nunc, ut eleifend quam ex ut ex. Phasellus et diam eget turpis placerat egestas vehicula at nibh. Phasellus feugiat nulla ac nisi vestibulum, a aliquet metus dictum. Vestibulum nec sapien vitae leo mollis ultrices ac sed sem.

Pellentesque vitae tincidunt ante, sit amet condimentum felis. Proin imperdiet, tellus eu vehicula interdum, libero augue sagittis nibh, in luctus neque turpis ac enim. Fusce iaculis semper lacus, non condimentum neque cursus in. Suspendisse rhoncus lectus eleifend purus consectetur, eu placerat felis tempus. Fusce turpis tortor, scelerisque ullamcorper tellus ac, iaculis viverra risus. Aenean varius mollis nisi, at euismod tellus. Integer ullamcorper ipsum eget nisi rhoncus finibus. Quisque eget commodo ex, pretium vehicula dui. Integer sed feugiat tellus. In hac habitasse platea dictumst. Nunc risus elit, rutrum ac nisi in, gravida vestibulum nunc. Duis sodales blandit nisl, in condimentum nisi facilisis at. Nulla eleifend pulvinar libero, et congue sem molestie ut. Sed sollicitudin, neque quis iaculis vehicula, sapien dolor ornare nibh, nec placerat diam dui a leo. Nullam ut semper eros. Etiam vitae quam consequat, molestie ligula id, tincidunt ipsum. Proin ullamcorper malesuada faucibus. Nunc molestie in neque quis ultricies. Proin non diam non sapien tristique viverra. Aenean sagittis metus eget mi ullamcorper accumsan. Maecenas in ex at arcu porta pellentesque gravida ut arcu. Nulla mattis sagittis erat eu pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus metus vel nulla eleifend, eu lacinia augue aliquam. Fusce id nisi quis tortor ultrices egestas non gravida dui. Aliquam volutpat aliquam felis, ac commodo felis venenatis nec. Duis interdum, est a sollicitudin commodo, turpis mauris consectetur nunc, ut eleifend quam ex ut ex. Phasellus et diam eget turpis placerat egestas vehicula at nibh. Phasellus feugiat nulla ac nisi vestibulum, a aliquet metus dictum. Vestibulum nec sapien vitae leo mollis ultrices ac sed sem.

Pellentesque vitae tincidunt ante, sit amet condimentum felis. Proin imperdiet, tellus eu vehicula interdum, libero augue sagittis nibh, in luctus neque turpis ac enim. Fusce iaculis semper lacus, non condimentum neque cursus in. Suspendisse rhoncus lectus eleifend purus consectetur, eu placerat felis tempus. Fusce turpis tortor, scelerisque ullamcorper tellus ac, iaculis viverra risus. Aenean varius mollis nisi, at euismod tellus. Integer ullamcorper ipsum eget nisi rhoncus finibus. Quisque eget commodo ex, pretium vehicula dui. Integer sed feugiat tellus. In hac habitasse platea dictumst. Nunc risus elit, rutrum ac nisi in, gravida vestibulum nunc. Duis sodales blandit nisl, in condimentum nisi facilisis at. Nulla eleifend pulvinar libero, et congue sem molestie ut. Sed sollicitudin, neque quis iaculis vehicula, sapien dolor ornare nibh, nec placerat diam dui a leo. Nullam ut semper eros. Etiam vitae quam consequat, molestie ligula id, tincidunt ipsum. Proin ullamcorper malesuada faucibus. Nunc molestie in neque quis ultricies. Proin non diam non sapien tristique viverra. Aenean sagittis metus eget mi ullamcorper accumsan. Maecenas in ex at arcu porta pellentesque gravida ut arcu. Nulla mattis sagittis erat eu pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus metus vel nulla eleifend, eu lacinia augue aliquam. Fusce id nisi quis tortor ultrices egestas non gravida dui. Aliquam volutpat aliquam felis, ac commodo felis venenatis nec. Duis interdum, est a sollicitudin commodo, turpis mauris consectetur nunc, ut eleifend quam ex ut ex. Phasellus et diam eget turpis placerat egestas vehicula at nibh. Phasellus feugiat nulla ac nisi vestibulum, a aliquet metus dictum. Vestibulum nec sapien vitae leo mollis ultrices ac sed sem.
Pellentesque vitae tincidunt ante, sit amet condimentum felis. Proin imperdiet, tellus eu vehicula interdum, libero augue sagittis nibh, in luctus neque turpis ac enim. Fusce iaculis semper lacus, non condimentum neque cursus in. Suspendisse rhoncus lectus eleifend purus consectetur, eu placerat felis tempus. Fusce turpis tortor, scelerisque ullamcorper tellus ac, iaculis viverra risus. Aenean varius mollis nisi, at euismod tellus. Integer ullamcorper ipsum eget nisi rhoncus finibus. Quisque eget commodo ex, pretium vehicula dui. Integer sed feugiat tellus. In hac habitasse platea dictumst. Nunc risus elit, rutrum ac nisi in, gravida vestibulum nunc. Duis sodales blandit nisl, in condimentum nisi facilisis at. Nulla eleifend pulvinar libero, et congue sem molestie ut. Sed sollicitudin, neque quis iaculis vehicula, sapien dolor ornare nibh, nec placerat diam dui a leo. Nullam ut semper eros. Etiam vitae quam consequat, molestie ligula id, tincidunt ipsum. Proin ullamcorper malesuada faucibus. Nunc molestie in neque quis ultricies. Proin non diam non sapien tristique viverra. Aenean sagittis metus eget mi ullamcorper accumsan. Maecenas in ex at arcu porta pellentesque gravida ut arcu. Nulla mattis sagittis erat eu pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus metus vel nulla eleifend, eu lacinia augue aliquam. Fusce id nisi quis tortor ultrices egestas non gravida dui. Aliquam volutpat aliquam felis, ac commodo felis venenatis nec. Duis interdum, est a sollicitudin commodo, turpis mauris consectetur nunc, ut eleifend quam ex ut ex. Phasellus et diam eget turpis placerat egestas vehicula at nibh. Phasellus feugiat nulla ac nisi vestibulum, a aliquet metus dictum. Vestibulum nec sapien vitae leo mollis ultrices ac sed sem.</p>
  </body>

</html>

jQuery检查滚动条的y位置是否大于展开后底部的y位置div。

编辑：修改它以使其更流畅并使用内部 SO 片段工具。

您可以使用库来执行此操作，例如 jQuery。

有了它，您需要做的是：

  • 创建一个 'click()' 函数让你的 div 向下滑动
  • 将该函数附加到某个元素（如我示例中的按钮）
  • 创建一个'scroll()'函数来查看滚动条何时达到特定高度
  • div'fadeOut()'当它

JS

$("#clickme").click(function() {
    $("#slideme").slideDown("slow");
});

$(document).scroll(function(){
    if($(document).scrollTop()>100 /* Insert height here */){
        $("#slideme").fadeOut();
    }
});

您可以在这里找到 JSFiddle：http://jsfiddle.net/qrdttrL1/1/

他们使用的实现很长并且有很多函数返回函数，但以下是您需要执行的操作的快速伪代码描述：

  1. 为要用作 "show button" 的元素创建一个 click 处理程序，单击时显示 "notification"。请注意，我的实现跳转到了页面顶部。在您的实施中，您应该将其更改为您选择的平滑滚动技术。 更新：我再次检查了 Airbnb 的网站，即使没有平滑滚动，我的实现在视觉上也与他们的相同。

    var $notification = $(".notification");

$(document).on("click", ".show-button", function() {
    $notification.slideDown(); //can use whatever effect you want here, or just .show()
    window.scrollTo(0, 0); //scroll to top of page
});

  2. 接下来，为 window 创建一个 scroll 处理程序，检查页面是否向下滚动到 "notification" 的高度以下（在换句话说，检查通知是否不再可见）。如果它不再在视图中，隐藏该元素并更新滚动位置，这样页面就不会跳转。请注意，在我的实现中，页面可能会在较慢的浏览器中跳转，因为我没有使用平滑滚动。但是，当您添加平滑滚动时，效果看起来会很自然。 

    $(window).on("scroll", function() {
    var notificationHeight = $notification.outerHeight(); //may be able to cache this or calculate outside the handler for reuse, depending on implementation
    var currentScrollY = $(window).scrollTop();

    if (currentScrollY > notificationHeight) {
        $notification.hide(); 

        //update the scroll browser scroll position
        var updatedScrollY = currentScrollY - notificationHeight;
        window.scrollTo(window.scrollX, updatedScrollY);
    }
});

  3. 如果我们希望使用 animation/effect 来隐藏 "notification,"，那么我们需要更新上面的 scroll 处理程序。查看当前代码，请注意我们使用 $notification.hide() 立即从文档中删除该元素。因此，当我们计算更新的滚动位置时，通知消耗的 space 不包括在内。但是，如果您使用 animation/effect，如 .fadeOut，元素的 display 属性 不会设置为 none 直到动画完成，尽管脚本执行继续在动画开始后立即执行（即在调用后立即执行）。因此，将在通知从流中删除之前计算并应用新的滚动位置，导致页面看起来跳到顶部，通知处于完整或接近完整视图。为了解决这个问题，我们需要推迟执行更新滚动位置的代码，直到 animation/effect 完成。我们可以轻松地将用于更新滚动位置的代码移动到 animation/effect 方法的回调中。 

    $(window).on("scroll", function() {
    var notificationHeight = $notification.outerHeight(); //may be able to cache this or calculate outside the handler for reuse, depending on implementation
    var currentScrollY = $(window).scrollTop();

    if (currentScrollY > notificationHeight) {
        //can use whatever effect you want, but must pass scroll position update code in callback to prevent page jump, if not using .hide()
        $notification.fadeOut(function () {
          //update the scroll browser scroll position
          var updatedScrollY = currentScrollY - notificationHeight;
          window.scrollTo(window.scrollX, updatedScrollY);
        });
    }
});

    注意：由于我们看不到该元素，因此我们不应使用 animation/effect（如 fadeOut）来隐藏通知。添加效果只会增加不必要的开销，因为元素在隐藏时不在视图中。但是，我已经包括了这一步，因为 OP 特别提到使用 fadeOut 来隐藏通知。我将在演示中包含两者的示例。

  4. 由于我是性能爱好者，我们不需要处理 window 的 scroll 事件，除非 "notification" 实际显示，让我们将我们的 scroll 处理程序绑定移动到一个函数中，并添加一个名称 space 和 .off 调用，以便我们可以在不影响其他处理程序的情况下解除绑定。

    //binds the scroll handler we created in step 2 to the window
function bindScrollHandlerForNotification() {
    $(window).on("scroll.checkHideNotification", function() {
        var notificationHeight = $notification.outerHeight(); //may be able to cache this or calculate outside the handler for reuse, depending on implementation
        var currentScrollY = $(window).scrollTop();

        if (currentScrollY > notificationHeight) {
            //can use whatever effect you want, but must pass scroll position update code in callback to prevent page jump, if not using .hide()
            $notification.fadeOut(function() {
                //update the scroll browser scroll position
                var updatedScrollY = currentScrollY - notificationHeight;
                window.scrollTo(window.scrollX, updatedScrollY);

                //unbind the handler since the notification is hidden
                $(window).off("scroll.checkHideNotification");
            });
        }
    });
}

  5. 现在我们有了一个函数来绑定我们的处理程序，让我们更新步骤 1 中的 click 处理程序以调用该函数来绑定我们的 scroll 处理程序。

    $(document).on("click", ".show-button", function() {
    $notification.slideDown(); //can use whatever effect you want here, or just .show()
    window.scrollTo(0, 0); //scroll to top of page
    bindScrollHandlerForNotification();
});


最终实施和演示

使用 .fadeOut() 隐藏通知

var $notification = $(".notification");

//listen for our show button to be clicked
$(document).on("click", ".show-button", function() {
  $notification.slideDown(); //can use whatever effect you want here, or just .show()
  window.scrollTo(0, 0); //scroll to top of page
  bindScrollHandlerForNotification();
});

//binds the scroll handler we created in step 2 to the window
function bindScrollHandlerForNotification() {
  $(window).on("scroll.checkHideNotification", function() {
    var notificationHeight = $notification.outerHeight(); //may be able to cache this or calculate outside the handler for reuse, depending on implementation
    var currentScrollY = $(window).scrollTop();

    if (currentScrollY > notificationHeight) {
      //can use whatever effect you want, but must pass scroll position update code in callback to prevent page jump, if not using .hide()
      $notification.fadeOut(function() {
          //update the scroll browser scroll position
          var updatedScrollY = currentScrollY - notificationHeight;
          window.scrollTo(window.scrollX, updatedScrollY);

          //unbind the handler since the notification is hidden
          $(window).off("scroll.checkHideNotification");
      });
    }
  });
};

.page-container {
  height: 5000px;
}
.notification {
  display: none;
  padding: 75px;
  border-bottom: 1px solid white;
  background: #009afd;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: arial, helvetica, sans-serif;
}
.main-content {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  border-left: 2px solid rgb(200, 200, 200);
  border-right: 2px solid rgb(200, 200, 200);
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page-container">
  <div class="notification"><span class="notification-content">Test Notification</span>
  </div>
  <div class="main-content">
    <div class="content-block">
      <button type="button" class="show-button">Show Notification</button>
    </div>
  </div>
</div>


使用 .hide() 隐藏通知

var $notification = $(".notification");

//listen for our show button to be clicked
$(document).on("click", ".show-button", function() {
  $notification.slideDown(); //can use whatever effect you want here, or just .show()
  window.scrollTo(0, 0); //scroll to top of page
  bindScrollHandlerForNotification();
});

//binds the scroll handler we created in step 2 to the window
function bindScrollHandlerForNotification() {
  $(window).on("scroll.checkHideNotification", function() {
    var notificationHeight = $notification.outerHeight(); //may be able to cache this or calculate outside the handler for reuse, depending on implementation
    var currentScrollY = $(window).scrollTop();

    if (currentScrollY > notificationHeight) {
      //can use whatever effect you want, but must pass scroll position update code in callback to prevent page jump, if not using .hide()
      $notification.hide();
      
      //update the scroll browser scroll position
      var updatedScrollY = currentScrollY - notificationHeight;
      window.scrollTo(window.scrollX, updatedScrollY);

      //unbind the handler since the notification is hidden
      $(window).off("scroll.checkHideNotification");
    }
  });
};

.page-container {
  height: 5000px;
}
.notification {
  display: none;
  padding: 75px;
  border-bottom: 1px solid white;
  background: #009afd;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: arial, helvetica, sans-serif;
}
.main-content {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  border-left: 2px solid rgb(200, 200, 200);
  border-right: 2px solid rgb(200, 200, 200);
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page-container">
  <div class="notification"><span class="notification-content">Test Notification</span>
  </div>
  <div class="main-content">
    <div class="content-block">
      <button type="button" class="show-button">Show Notification</button>
    </div>
  </div>
</div>