Bagaimanakah Saya Boleh Membetulkan Kedudukan X-Axis Elemen HTML Semasa Membenarkan Penatal Menegak?

Betulkan Elemen pada X-Axis Sahaja: Mengekalkan Kedudukan Mendatar pada Penatalan

Dalam pembangunan web, elemen penentududukan dengan tepat adalah penting untuk pengalaman pengguna dan estetika. Satu senario biasa ialah mempunyai elemen kekal tetap pada paksi-x tetapi tatal secara menegak bersama-sama dengan pengalaman menyemak imbas pengguna.

Soalan:

Adakah mungkin untuk membetulkan kedudukan elemen HTML pada paksi-x sahaja, membenarkan ia menatal secara menegak dengan kandungan halaman tetapi mengekalkan mendatarnya kedudukan?

Jawapan:

Ya, mencapai ini boleh dilakukan melalui gabungan CSS dan JavaScript. Begini cara anda boleh melakukannya:

CSS:

Tentukan kedudukan elemen sebagai mutlak dan tentukan offset teratasnya:

#my-element {
    position: absolute;
    top: 15px;
}

JavaScript:

Menggunakan jQuery, tambahkan pendengar acara pada acara tatal tetingkap. Dalam pendengar, laraskan kedudukan kiri elemen berdasarkan kedudukan skrol semasa:

$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft()
    });
});

Dalam CSS, kami meletakkan elemen secara mutlak dengan offset teratas 15px untuk memastikan ia kekal di atas bahagian atas halaman . Kod JavaScript memastikan bahawa semasa pengguna menatal, offset kiri elemen kekal sama, menghalangnya daripada bergerak secara mendatar.

Nota:

Untuk mengekalkan kedudukan kiri elemen walaupun ia berubah dalam CSS, anda boleh menggunakan kod JavaScript yang dikemas kini ini:

var leftOffset = parseInt($("#my-element").css('left'));
$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

Pendekatan ini merebut kedudukan kiri awal daripada CSS dan menggunakannya dalam skrip, memastikan bahawa sebarang pengubahsuaian CSS berikutnya ditunjukkan dalam tingkah laku JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Kedudukan X-Axis Elemen HTML Semasa Membenarkan Penatal Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!