Bagaimanakah Saya Boleh Membetulkan Kedudukan Paksi X Elemen Semasa Membenarkan Tatal Menegak dalam CSS?

Membetulkan Kedudukan pada Paksi-X Hanya dalam CSS: Panduan Komprehensif

Keupayaan untuk menetapkan kedudukan elemen pada paksi X manakala membenarkan tatal menegak adalah keperluan biasa dalam reka bentuk web. Artikel ini akan meneroka teknik menggunakan CSS dan JavaScript untuk mencapai kesan ini.

Pelaksanaan CSS

Untuk menetapkan kedudukan pada paksi-X hanya menggunakan CSS, gunakan sifat kedudukan mutlak sambil menyatakan kedudukan kiri dan kedudukan atas tetap:

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

Ini akan meletakkan elemen 15 piksel dari atas dan 15 piksel dari kiri, dan ia akan kekal dalam kedudukan itu apabila pengguna menatal secara menegak.

Pelaksanaan JavaScript menggunakan JQuery

Untuk meningkatkan lagi kesan, JavaScript boleh digunakan untuk memastikan kedudukan kiri sejajar dengan halaman menatal:

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15
    });
});

Dalam kod ini, fungsi scrollLeft() mengembalikan kedudukan tatal mendatar tetingkap. Menambah 15 pada nilai ini memastikan elemen kekal 15 piksel dari kiri walaupun pengguna menatal secara mendatar.

Pelarasan Skrip Dinamik

Skrip asal memerlukan kedudukan kiri dalam CSS untuk ditetapkan kepada 15px. Untuk menjadikannya lebih fleksibel, anda boleh menggunakan yang berikut:

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

Skrip ini akan melaraskan secara automatik berdasarkan kedudukan kiri CSS.

Kesimpulan

Menggunakan CSS dan JavaScript, anda boleh membetulkan kedudukan pada paksi X sahaja, membenarkan elemen menatal secara menegak sambil kekal secara mendatar. Teknik ini memberikan fleksibiliti dan kawalan ke atas kedudukan elemen, meningkatkan pengalaman pengguna dan reka bentuk serba boleh.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Kedudukan Paksi X Elemen Semasa Membenarkan Tatal Menegak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!