如何在向下滾動800px後顯示div並在向上滾動時隱藏它？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-12-10 09:49:14

原創

630 人瀏覽過

How to Show a Div After Scrolling Down 800px and Hide It on Scroll Up?

在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中文網其他相關文章！