Bagaimana untuk Mencegah Lompatan Anchor dengan Pengepala Tetap dalam CSS?

Anchor Offset untuk Pengepala Tetap: Panduan Tepat

Apabila bekerja dengan pengepala tetap pada halaman web, adalah perkara biasa untuk menghadapi lompatan yang menggelegar apabila menavigasi ke sauh yang diletakkan lebih jauh di bawah halaman. Ini kerana penambat dijajarkan ke bahagian atas port pandangan, meninggalkan kandungan dikaburkan di belakang pengepala.

Untuk mengurangkan isu ini, kami boleh memperkenalkan offset untuk mengimbangi ketinggian pengepala. Offset ini memastikan bahawa sauh diletakkan di lokasi yang betul, tatal dan kandungan paparan tanpa halangan.

Penyelesaian HTML/CSS:

Pendekatan CSS semata-mata boleh dilakukan tanpa keperluan untuk JavaScript. Tetapkan kelas unik kepada elemen penambat, seperti "sauh":

<a class="anchor">

Seterusnya, gayakan sauh menggunakan CSS untuk menjadikannya elemen blok dan letakkannya secara relatif dengan offset atas negatif sama dengan pengepala ketinggian (cth., -250px):

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

Pengubahsuaian ini akan mengimbangi penambat secara menegak sebanyak 250px, memastikan bahawa apabila ia menjadi aktif, halaman menatal untuk memaparkan kandungan di lokasi yang dikehendaki, tanpa disembunyikan oleh pengepala tetap.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Lompatan Anchor dengan Pengepala Tetap dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!