Bagaimana untuk Membuat Div \'Stick\' ke Bahagian Atas Halaman pada Tatal?

Kedudukan Div di Atas Skrin pada Tatal Menegak

Soalan:

Bagaimana saya boleh membuat div "melekat" pada bahagian atas halaman web apabila pengguna menatal melepasinya? Selepas kembali ke bahagian atas halaman, saya mahu div dipulihkan ke kedudukan asalnya.

Penyelesaian:

Kunci kepada fungsi ini ialah menetapkan kedudukan: ditetapkan pada div hanya selepas pengguna menatal melepasinya. Untuk mencapai matlamat ini, kita boleh menggunakan pengendali yang dilampirkan pada window.scroll event:

<code class="javascript">// Cache selectors for improved performance
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

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

Kod ini menambah kelas CSS melekit pada div apabila halaman menatal melepasinya dan mengalih keluar kelas apabila halaman kembali ke atas. Kelas CSS ditakrifkan sebagai:

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

Apabila kelas melekit ditambahkan, div akan mengambil kedudukan tetap dan kekal di bahagian atas skrin. Ia akan kembali ke kedudukan asalnya apabila kelas dialih keluar.

Nota: Kod telah dioptimumkan untuk cache objek jQuery untuk prestasi yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div \'Stick\' ke Bahagian Atas Halaman pada Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!