首頁 >web前端 >css教學 >如何根據捲動位置顯示和隱藏div?

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

Susan Sarandon
Susan Sarandon原創
2024-12-13 00:42:09807瀏覽

How to Show and Hide a Div Based on Scroll Position?

從頂部滾動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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn