如何根據捲動位置顯示和隱藏div？

從頂部滾動800px 後顯示隱藏的Div

場景：

您想要在用戶之後顯示隱藏的div將頁面向下捲動800 像素。此外，當使用者向上捲動且高度小於 800px 時，div 應該會消失。

HTML 結構：

<div class="bottomMenu">
  <!-- Content -->
</div>

CSS：

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

>Java (jQuery):

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

說明：

此腳本監視文件的捲動位置。當捲動位置大於 800 像素時，會觸發 .bottomMenu div 的淡入動畫。相反，當滾動位置低於 800 像素時，會觸發淡出動畫。

以上是如何根據捲動位置顯示和隱藏div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！