Bagaimana untuk Menghalang Objek Tetap daripada Pengaki Bertindih?

Membetulkan Objek Tetap pada Pengaki Halaman

Isu biasa objek tetap yang menatal atas pengaki mempunyai penyelesaian yang mudah. Sebagai contoh, mari kita pertimbangkan kotak "kongsi" tetap di sudut kiri bawah skrin. Untuk mengelakkannya daripada bertindih dengan pengaki, kami akan menghentikannya kira-kira 10px di atas pengaki.

Mula-mula, kita perlu menentukan jarak kotak dengan pengaki setiap kali halaman itu ditatal:

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

Jika kotak menjadi terlalu hampir dengan pengaki (iaitu, dalam 10px), kami akan menukar kedudukannya kepada mutlak:

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

Perhatikan bahawa induk #social-float hendaklah adik kepada pengaki dalam struktur HTML.

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