Rumah hujung hadapan web tutorial css Bagaimanakah Saya Boleh Membetulkan Kedudukan Paksi X Elemen Semasa Membenarkan Tatal Menegak dalam CSS?

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

Nov 26, 2024 pm 10:59 PM

How Can I Fix an Element's X-Axis Position While Allowing Vertical Scrolling in 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;
}
Salin selepas log masuk

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
    });
});
Salin selepas log masuk

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
    });
});
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Menambah bayang -bayang kotak ke blok dan elemen WordPress Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Mar 02, 2025 am 09:03 AM

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Bekerja dengan Caching Graphql Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM

Bekerja dengan Caching Graphql

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Menjadikan Peralihan Svelte Khas pertama anda Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM

Menjadikan Peralihan Svelte Khas pertama anda

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Mar 08, 2025 am 09:45 AM

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Muat naik fail dengan multer di node.js dan ekspres Muat naik fail dengan multer di node.js dan ekspres Mar 02, 2025 am 09:15 AM

Muat naik fail dengan multer di node.js dan ekspres

See all articles