Bagaimana untuk Menunjukkan dan Menyembunyikan Div Berdasarkan Kedudukan Tatal?

Tunjukkan Div Tersembunyi Selepas Menatal 800px dari Atas

Senario:

Anda mahu mendedahkan div tersembunyi selepas pengguna menatal ke bawah halaman sebanyak 800 piksel. Tambahan pula, apabila pengguna menatal ke atas dan ketinggiannya kurang daripada 800px, div akan hilang.

Struktur 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;
}

JavaScript (jQuery):

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

Penjelasan:

Skrip ini memantau kedudukan skrol dokumen. Apabila kedudukan tatal menjadi lebih besar daripada 800 piksel, ia mencetuskan animasi fade-in untuk div .bottomMenu. Sebaliknya, apabila kedudukan skrol jatuh di bawah 800 piksel, ia akan mencetuskan animasi pudar.

Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan dan Menyembunyikan Div Berdasarkan Kedudukan Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!