Bagaimana untuk Membuat Div Melekat pada Bahagian Atas Skrin Selepas Menatal Melepasinya?

Melabuhkan Div ke Bahagian Atas Skrin Apabila Ditatal Melepasi

Semasa membangunkan halaman web interaktif, selalunya diingini untuk mempunyai elemen yang mengikuti ciri pengguna tatal, terutamanya apabila mencapai bahagian tertentu. Satu senario sedemikian melibatkan div yang diletakkan berhampiran bahagian atas halaman tetapi harus "berpaut" pada skrin apabila ditatal melepasi.

Penyelesaian

Untuk mencapai kesan ini, kombinasi kreatif JavaScript dan CSS digunakan. Gaya position:fixed digunakan pada div, tetapi hanya selepas pengguna menatal melepasinya.

Begini cara untuk melakukannya:

<code class="javascript">// Cache jQuery objects 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 JavaScript ini menambahkan pengendali acara pada acara window.scroll, yang memantau kedudukan skrol. Apabila tatal melebihi kedudukan awal div (elTop), kelas CSS "melekit" ditambahkan padanya. Kelas ini mengandungi gaya CSS berikut:

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

Akibatnya, div mengambil kedudukan tetap dan kekal di bahagian atas halaman selagi ia terus ditatal melepasi. Apabila pengguna menatal kembali ke atas, kelas melekit akan dialih keluar dan div kembali ke kedudukan asalnya.

Penyelesaian ini menggabungkan kuasa JavaScript dan CSS untuk mencipta pengalaman responsif dan mesra pengguna dengan mengekalkan elemen penting dalam jangkauan, tanpa mengira kedudukan tatal halaman.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Melekat pada Bahagian Atas Skrin Selepas Menatal Melepasinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!