javascript - 当我向下滚动到洞 div 时，如何淡出 div，它不会再次显示

Question

我正在寻求实现一项功能，其中单击按钮(或其他元素)时通过页面顶部的 slideDown 显示通知，然后通过 fadeOut 隐藏通知code> 当它滚动到 View 之外时。此功能类似于单击 airbnb's website 上的“工作原理”时发生的情况。 .

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

1. 点击指定元素即可显示通知
2. 通知滑入页面顶部的 View 中，窗口自动滚动到顶部
3. 用户向下滚动页面，通知元素一旦滚出 View 就会淡出

有人知道如何实现吗？

Answer 1

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

1. 为要用作“显示按钮”的元素创建一个 click 处理程序，在单击时显示“通知”。请注意，我的实现跳转到页面顶部。在您的实现中，您应该将其更改为您选择的平滑滚动技术。 更新:我再次检查了 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. 接下来，为窗口创建一个scroll处理程序，用于检查页面是否已向下滚动到“通知”的高度以下(在换句话说，检查通知是否不再显示)。如果它不再显示在 View 中，请隐藏该元素并更新滚动位置，以便页面不会跳转。请注意，在我的实现中，页面可能会在较慢的浏览器中跳转，因为我没有使用平滑滚动。但是，当您添加平滑滚动时，效果看起来会很自然。

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

   $(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);
           });
       }
   });
   

   注意:由于我们看不到该元素，因此我们不应该使用动画/效果(例如 fadeOut)来隐藏通知。添加效果只会增加不必要的开销，因为元素隐藏时不在 View 中。但是，我包含了此步骤，因为 OP 特别提到使用 fadeOut 来隐藏通知。我将在演示中包含这两个示例。

4. 由于我非常注重性能，并且除非实际显示“通知”，否则我们不需要处理 window 的 scroll 事件，让我们将 scroll 处理程序绑定(bind)移动到一个函数中，并添加一个命名空间和 .off 调用，以便我们可以取消绑定(bind)它而不影响其他处理程序。

   //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. 现在我们有了一个函数来绑定(bind)我们的处理程序，让我们更新第 1 步中的 click 处理程序，以调用该函数来绑定(bind)我们的 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>