首頁 > web前端 > css教學 > 如何讓div向下捲動800像素後顯示?

如何讓div向下捲動800像素後顯示?

Linda Hamilton
發布: 2024-12-30 20:16:09
原創
1024 人瀏覽過

How Can I Show a Div After Scrolling Down 800 Pixels?

800px後在scrollDown上顯示div

場景:

場景:滾動時需要顯示隱藏的距離頁面頂部至少800 像素。為此,需要修改現有範例。

解決方案:
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});
登入後複製

要滿足您的要求,請修改jQuery 程式碼如下:

  • 說明:
  • 說明:
  • 說明
  • scroll()事件偵聽器監視器頁面的捲動位置。

向下捲動超過 800 像素 (y > 800) 時,.bottomMenu div 使用 fadeIn() 變得可見。 向後滾動時當高度低於800 像素(y

<!-- HTML -->
<div class="bottomMenu">
  <!-- content -->
</div>
登入後複製
<!-- CSS -->
.bottomMenu {
    display: none;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0;
    z-index: 100;
}
登入後複製
示例:

以上是如何讓div向下捲動800像素後顯示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板