Position de HTML : fixe l’en-tête de page et en page ancres

Question

Si j'ai un non-défilement d'en-tête dans une page HTML, fixés sur la partie supérieure, ayant une hauteur définie:

Est-il possible d'utiliser l'URL d'ancrage ( #fragment partie) navigateur pour faire défiler jusqu'à un certain point dans la page, mais toujours respecter la hauteur de l'élément fixe , sans l'aide de JavaScript?

http://foo.com/#bar

MAL (mais le comportement commun): CORRECT:
+---------------------------------+ +---------------------------------+
| BAR///////////////////// l'en-tête| | //////////////////////// en-tête |
+---------------------------------+ +---------------------------------+
| Voici le reste du Texte | | BAR |
| ... | | |
| ... | | Ici, c'est le reste du Texte |
| ... | | ... |
+---------------------------------+ +---------------------------------+

Answer 1

J’ai eu le même problème. Je l’ai résolu en ajoutant une classe à l’élément d’ancrage avec la hauteur de la barre que la valeur de padding-top.

Et puis tout simplement le css :

Answer 2

J’utilise cette approche :

Il ajoute un élément invisible avant chaque cible. Il fonctionne IE8 +.

Voici plusieurs solutions : http://nicolasgallagher.com/jump-links-and-viewport-positioning/

Answer 3

La meilleure façon que j'ai trouvé de traiter ce problème est (remplacer 65px avec votre élément fixe hauteur):

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

Si vous n'aimez pas l'utilisation de la cible sélecteur vous pouvez aussi le faire de cette façon:

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

Remarque: cet exemple ne fonctionnera pas si l'élément cible ont un backgound couleur que differant de son parent. par exemple:

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

dans ce cas, le vert la couleur de mes-élément cible va écraser son parent rouge élément 65px. Je n'ai pas je n'ai pas trouvé pur CSS solution pour faire face à ce problème, mais si vous n'avez pas d'autre couleur d'arrière-plan de cette solution est la meilleure.

Answer 4

Vous pouvez faire cela avec jQuery :

Answer 5

Vous pouvez essayer ceci :

Poser le toit rembourrage de valeur à la hauteur réelle de votre tête. Cela va présenter un léger écart supplémentaire au dessus de votre tête, mais il sera visible lorsque l’utilisateur passe à l’ancre et puis défile vers le haut. J’ai composé cette solution pour mon site dès maintenant, mais il ne montre une petite barre fixe en haut de la page, rien de trop élevé.