如何在向下滾動800px後顯示div並在向上滾動時隱藏它？

在800 像素後向下滾動時顯示Div

問題：

如何製作從頁面頂部向下捲動800px 後會出現隱藏的div 嗎？向上捲動且高度小於 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;
}

用於的滾動 jQuery變體800px:

此jQuery 代碼將在向下滾動後顯示div 800px:

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

向上滾動時隱藏的滾動事件變體：

向上滾動時隱藏的滾動事件變體：

$(document).scroll(function() {
  var height = $(window).scrollTop();

  if (height > 800) {
    $('.bottomMenu').css({
      display: 'block',
      opacity: 1
    });
  } else {
    $('.bottomMenu').css({
      display: 'none',
      opacity: 0
    });
  }
});

向上滾動時隱藏的滾動事件變體： 向上捲動且高度小於時隱藏div 800px，使用此代碼：

以上是如何在向下滾動800px後顯示div並在向上滾動時隱藏它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！