Bagaimanakah Saya Boleh Membetulkan Elemen pada X-Axis Sahaja dalam CSS dan JavaScript?

Letakkan Elemen Ditetapkan pada Paksi-X Sahaja

Dalam CSS, sifat kedudukan membenarkan anda mengawal kedudukan elemen pada halaman tersebut. Secara lalai, elemen diletakkan sebagai "statik", bermakna ia diletakkan mengikut aliran halaman. Walau bagaimanapun, anda boleh menggunakan nilai lain untuk meletakkan elemen dengan lebih tepat.

Untuk menetapkan elemen pada paksi-x sahaja, anda boleh menggunakan kedudukan tetap. Ini akan mengunci kedudukan elemen berbanding dengan port pandangan, jadi ia tidak akan bergerak secara mendatar walaupun apabila halaman menatal.

#element {
  position: fixed;
  top: 0;
  bottom: 0;
}

Walau bagaimanapun, menggunakan kedudukan tetap pada paksi tunggal boleh menyebabkan elemen bertindih kandungan lain pada halaman apabila ia menatal secara menegak. Untuk mengelakkan ini, anda boleh menggunakan JavaScript untuk melaraskan kedudukan elemen secara dinamik pada paksi-y apabila halaman ditatal.

JavaScript Solution

Menggunakan jQuery, anda boleh lampirkan pendengar acara tatal pada tetingkap dan kemas kini kedudukan teratas elemen dengan sewajarnya.

$(window).scroll(function() {
  $('#element').css('top', $(this).scrollTop());
});

Ini akan pastikan elemen kekal tetap pada paksi-x semasa menatal secara menegak.

Penyelesaian CSS

Kaedah lain untuk mencapai tingkah laku ini semata-mata dengan CSS ialah menggunakan transformasi: terjemah (). Fungsi transformasi ini boleh digunakan pada elemen untuk menggerakkannya secara menegak tanpa menjejaskan kedudukannya pada paksi-x.

#element {
  position: fixed;
  left: 15px;
  transform: translate(0, -$(window).scrollTop());
}

Pendekatan ini juga akan menghalang elemen daripada bertindih dengan kandungan lain apabila ia menatal.

Penyelesaian Kemas Kini

Seperti yang dicadangkan oleh @PierredeLESPINAY, untuk membuat perubahan sokongan skrip dalam CSS tanpa perlu mengekod semulanya, anda boleh merebut kedudukan kiri awal elemen menggunakan parseInt($("#element").css('left')) dan gunakannya dalam skrip sebagai offset.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Elemen pada X-Axis Sahaja dalam CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!