Bagaimana untuk Membuat Div \"Stick\" ke Bahagian Atas Skrin Apabila Menatal Melepasinya?

Cara Memastikan Div Tetap Di Atas Skrin Apabila Menatal Melepasinya

Masalah:

Anda ada div yang pada mulanya terletak 100px dari bahagian atas halaman dan mengandungi butang atau kawalan penting. Apabila pengguna menatal ke bawah melepasi div ini, anda mahu ia "melekat" pada bahagian atas skrin untuk akses mudah. Apabila pengguna menatal semula ke atas, anda mahu ia kembali ke kedudukan asalnya.

Penyelesaian:

Rahsianya terletak pada penggunaan position:fixed property tetapi hanya selepas pengguna telah menatal melepasi div. Begini cara untuk mencapainya:

JavaScript:

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

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

Kod ini menangkap acara tatal tetingkap dan secara dinamik menggunakan kelas CSS "melekit" apabila pengguna menatal melepasi bahagian atas div.

CSS:

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

CSS ini menetapkan kelas "melekit" untuk menjadikan div itu melekat pada bahagian atas skrin. Secara lalai, position:fixed meletakkan div relatif kepada tetingkap, memastikan ia kekal di bahagian atas sepanjang menatal.

Cara ia Berfungsi:

Apabila halaman dimuatkan, div diletakkan 100px dari atas. Apabila pengguna menatal ke bawah, JavaScript menyemak sama ada kedudukan skrol semasa melebihi kedudukan teratas awal div. Jika ya, ia menggunakan kelas "melekit" pada div, menyebabkan ia menjadi tetap pada bahagian atas skrin. Apabila pengguna menatal semula ke atas, proses diterbalikkan dan kelas "melekit" dialih keluar, membolehkan div menyambung semula kedudukan asalnya.

Ringkasnya, penyelesaian ini berkesan menjadikan div "berpaut" pada bahagian atas skrin apabila pengguna menatal melepasinya sambil membenarkannya kembali ke kedudukan asalnya apabila pengguna menatal kembali ke atas.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div \"Stick\" ke Bahagian Atas Skrin Apabila Menatal Melepasinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!