Bagaimana untuk Menghalang Objek Tetap daripada Bertindih Pengaki Menggunakan jQuery?

Mengelakkan Pertindihan Objek Tetap dengan Pengaki

Ramai pembangun web menghadapi isu objek tetap yang menatal ke atas pengaki. Ini adalah perkara biasa dengan elemen seperti kotak kongsi, menu navigasi atau widget media sosial. Untuk mengelakkan pertindihan ini, penyelesaian mudah boleh dilaksanakan menggunakan jQuery.

Pertimbangkan struktur HTML berikut:

<div>

Dan CSS:

#social-float {
    position: fixed;
    bottom: 10px;
    left: 10px;
    /* Other styles... */
}

Untuk memastikan bahawa kotak kongsi kekal tetap melainkan ia mencapai pengaki, gunakan jQuery untuk memantau kedudukannya pada tatal:

$(document).scroll(function() {
    checkOffset();
});

function checkOffset() {
    if ($('#social-float').offset().top + $('#social-float').height() 
                                          >= $('#footer').offset().top - 10) {
        $('#social-float').css('position', 'absolute');
    } else if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) {
        $('#social-float').css('position', 'fixed');
    }
}

Penyelesaian ini mengira jarak antara kotak kongsi dan pengaki, dan jika ia dalam 10px, ia menukar kedudukan kotak kepada mutlak. Apabila menatal ke atas, ia memulihkan kedudukan tetap.

Ingat untuk mempunyai elemen induk #social-float sebagai adik kepada pengaki untuk penyelesaian ini berfungsi dengan berkesan. Semoga berjaya melaksanakan pembetulan ini di tapak web anda!

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Objek Tetap daripada Bertindih Pengaki Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!