Comment empêcher les sauts d'ancre avec des en-têtes fixes en CSS ?

Décalage des ancres pour les en-têtes fixes : un guide précis

Lorsque vous travaillez avec un en-tête fixe sur une page Web, il est courant de rencontrer un saut discordant lors de la navigation vers des ancres placées plus bas dans la page. En effet, l'ancre s'aligne sur le haut de la fenêtre, laissant le contenu masqué derrière l'en-tête.

Pour atténuer ce problème, nous pouvons introduire un décalage pour compenser la hauteur de l'en-tête. Ce décalage garantit que les ancres sont positionnées au bon emplacement, défilent et affichent le contenu sans obstruction.

Solution HTML/CSS :

Une approche purement CSS est possible sans le besoin de JavaScript. Attribuez une classe unique à l'élément d'ancrage, telle que "anchor":

<a class="anchor">

Ensuite, stylisez l'ancre à l'aide de CSS pour en faire un élément de bloc et positionnez-la relativement avec un décalage supérieur négatif égal à celui de l'en-tête. hauteur (par exemple, -250px) :

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

Cette modification décalera verticalement l'ancre de 250px, garantissant que lorsqu'elle deviendra active, la page défile pour afficher le contenu à l'emplacement souhaité, sans être masqué par l'en-tête fixe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!