Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menunjukkan Div Selepas Menatal Ke Bawah 800 Piksel?

Bagaimanakah Saya Boleh Menunjukkan Div Selepas Menatal Ke Bawah 800 Piksel?

Linda Hamilton
Lepaskan: 2024-12-30 20:16:09
asal
1024 orang telah melayarinya

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

Tunjukkan div pada tatal ke Bawah selepas 800px

Senario:
Anda memerlukan div tersembunyi untuk muncul semasa menatal turun sekurang-kurangnya 800 piksel dari bahagian atas halaman. Untuk mencapai matlamat ini, contoh sedia ada memerlukan pengubahsuaian.

Penyelesaian:

Untuk memenuhi permintaan anda, ubah suai kod jQuery seperti berikut:

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

Penjelasan:

  • Acara tatal() pendengar memantau kedudukan tatal halaman.
  • Apabila menatal ke bawah melepasi 800 piksel (y > 800), div .bottomMenu menjadi kelihatan menggunakan fadeIn().
  • Apabila menatal kembali ke ketinggian di bawah 800 piksel (y < 800), div pudar menggunakan fadeOut().

Contoh:

<!-- HTML -->
<div class="bottomMenu">
  <!-- content -->
</div><pre class="brush:php;toolbar:false"><!-- CSS -->
.bottomMenu {
    display: none;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0;
    z-index: 100;
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menunjukkan Div Selepas Menatal Ke Bawah 800 Piksel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan