Bagaimana untuk Membuat Div Melekat pada Bahagian Atas Skrin Semasa Menatal?

Mengekalkan Div di Bahagian Atas Skrin Semasa Menatal

Dalam senario tertentu, adalah wajar untuk mempunyai div berpaut pada bahagian atas skrin apabila pengguna menatal ke bawah melepasinya, dengan berkesan "mengikuti" mereka semasa mereka menavigasi halaman web. Tingkah laku ini memastikan elemen penting, seperti butang atau kawalan navigasi, kekal mudah diakses.

Untuk mencapai kesan ini, anda boleh menggunakan strategi berikut:

Kod JavaScript:

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

// Attach a handler to the window's scroll event.
$window.scroll(function() {
    // Determine if the div has been scrolled past.
    if ($window.scrollTop() > elTop) {
        // Add a CSS class to make the div sticky.
        $stickyEl.addClass('sticky');
    } else {
        // Remove the sticky class when the user scrolls back up.
        $stickyEl.removeClass('sticky');
    }
});</code>

Kelas CSS:

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

Penjelasan:

Kod JavaScript pada mulanya menyimpan cache objek jQuery untuk prestasi yang lebih baik. Ia kemudian menambahkan pendengar acara tatal pada tetingkap, yang dicetuskan apabila pengguna menatal secara menegak. Dalam pendengar, ia menyemak sama ada div telah ditatal melepasi dengan membandingkan kedudukan tatal tetingkap dengan ofset div dari bahagian atas halaman. Jika kedudukan tatal lebih besar daripada ofset, kelas CSS melekit ditambahkan pada div, yang menetapkan kedudukannya kepada tetap dan meletakkannya di bahagian atas skrin. Sebaliknya, apabila pengguna menatal semula ke atas dan kedudukan tatal kurang daripada ofset, kelas melekit akan dialih keluar, mengembalikan div ke kedudukan asalnya.

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