Cara Membuat Div Melekit pada Tatal: Panduan untuk Kedudukan Tetap dan Pengendalian Acara?

Div Melekit: Berpaut pada Bahagian Atas Skrin semasa Menatal

Bayangkan mempunyai kedudukan div berhampiran bahagian atas halaman dengan butang atau kawalan penting. Apabila pengguna menatal secara menegak, anda mahu div ini mengikuti mereka, berpaut pada bahagian atas skrin. Apabila kembali ke atas, ia harus menyambung semula lokasi asalnya.

Penyelesaian

Kunci untuk mencapai gelagat ini ialah menjadikan div "melekit" hanya selepas pengguna menatalnya melepasi port pandangan. Ini melibatkan menetapkan kedudukan CSSnya kepada tetap. Begini cara untuk melaksanakannya:

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

Kod ini melampirkan pengendali acara pada acara skrol tetingkap. Apabila dicetuskan, ia menyemak sama ada kedudukan skrol semasa telah melebihi elTop (offset awal div dari atas). Jika benar, ia menambahkan kelas CSS bernama sticky pada div, menyebabkan ia menjadi tetap di bahagian atas skrin. Jika tidak, ia mengalih keluar kelas, membenarkan div kembali ke kedudukan asalnya.

Takrif kelas CSS yang sepadan akan kelihatan seperti ini:

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

Atas ialah kandungan terperinci Cara Membuat Div Melekit pada Tatal: Panduan untuk Kedudukan Tetap dan Pengendalian Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!