Bagaimana untuk Menunjukkan Div Selepas Tatal Ke Bawah 800px dan Sembunyikan Ia pada Tatal Ke Atas?

Tunjukkan Div pada Tatal Ke Bawah Selepas 800px

Soalan:

Bagaimana saya boleh membuat div tersembunyi muncul selepas menatal ke bawah 800px dari bahagian atas halaman? Apabila menatal ke atas dan ketinggian kurang daripada 800px, div sepatutnya hilang.

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

Varian jQuery untuk Tatal 800px:

Kod jQuery ini akan menunjukkan div selepas menatal ke bawah 800px:

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

Tatal Varian Acara untuk Disembunyikan Semasa Menatal Ke Atas:

Untuk menyembunyikan div semasa menatal ke atas dan ketinggian kurang daripada 800px, gunakan kod ini:

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

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

Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan Div Selepas Tatal Ke Bawah 800px dan Sembunyikan Ia pada Tatal Ke Atas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!