Bagaimana untuk Menghalang Elemen Kedudukan Tetap daripada Bertindih Pengaki?

Menyelesaikan Pertindihan Kedudukan Tetap pada Isu Footer

Apabila mereka bentuk halaman web dengan elemen kedudukan tetap, adalah perkara biasa untuk menghadapi senario di mana unsur-unsur ini bertindih dengan pengaki halaman. Untuk menangani isu ini, penyelesaian jQuery yang mudah dan berkesan boleh dilaksanakan.

Kenal pasti Elemen

Kod html yang disediakan mentakrifkan elemen kotak kongsi (#social-float ) dan CSS meletakkannya di sudut kiri bawah tetap. Elemen pengaki (#footer) tidak mempunyai ketinggian tetap.

Kendalikan Tatal Halaman

Untuk memantau kedudukan kotak kongsi berbanding pengaki, daftarkan tatal pengendali acara menggunakan kaedah tatal() jQuery.

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

Semak Kotak Kongsi Offset

Di dalam fungsi checkOffset(), kira offset menegak kotak kongsi berhubung dengan pengaki. Jika ofset kurang daripada 10px, bermakna kotak kongsi telah menceroboh pengaki, kemas kini kedudukannya kepada mutlak.

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
}

Pulihkan Kedudukan Tetap

Apabila pengguna menatal sandaran halaman, memulihkan kedudukan tetap kotak kongsi dengan menetapkan semula kedudukannya tetap.

if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed');

Pastikan Elemen Adik Beradik

Ibu bapa kotak kongsi (#social-float) hendaklah adik beradik kepada pengaki (#footer). Ini membenarkan kedudukan yang betul berbanding pengaki.

<div class="social-float-parent">
    <div>

Dengan melaksanakan penyelesaian jQuery ini, kotak kongsi akan kekal di tempatnya tetapi akan berhenti secara automatik sebelum bertindih pengaki, memastikan reka bentuk yang bersih dan menarik secara visual.

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