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

Tunjukkan Div pada Tatal Ke Bawah Selepas 800px Dilawati Semula

Dalam perbincangan yang dilawati semula ini, kami berhasrat untuk memperhalusi pendekatan kami untuk menunjukkan div tersembunyi apabila menatal ke bawah selepas 800px dari halaman atas.

Penyelesaian:

Kami menggunakan penyelesaian mudah menggunakan fungsi $(document).scroll() JavaScript, seperti berikut:

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

Penjelasan:

1. scrollTop mendapatkan semula kedudukan skrol menegak semasa halaman.
2. Jika scrollTop melebihi 800 piksel, div Menu bawah boleh dilihat menggunakan fadeIn().
3. Sebaliknya, jika scrollTop jatuh di bawah 800 piksel, bottomMenu disembunyikan menggunakan fadeOut().

Peningkatan untuk Tatal Ke Atas:

Untuk meningkatkan penyelesaian ini, kami boleh menambah kefungsian untuk menyembunyikan menu bawah apabila menatal ke atas dan ketinggian tatal kurang daripada 800px:

if (y < 800 && $('.bottomMenu').css('display') !== 'none') {
    $('.bottomMenu').fadeOut();
}

Syarat tambahan ini memastikan bottomMenu kekal tersembunyi apabila menatal ke atas dan ketinggian tatal kurang daripada 800px.

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