Comment puis-je compenser où mon fixe la barre de navigation me prend?

J'ai un fixe de la barre de navigation sur mon site qui reste au sommet avec des liens pour me prendre par les différentes sections en bas de la page. Cependant, parce que mon fixe la barre de navigation a une hauteur de 40px, le début 40px de chaque section est couvert. Comment aurais-je offset où mes liens me prendre par 40px à l'aide de HTML ou CSS?
Merci.

Avez-vous essayé de mettre un top-margin: 40px; le contenu div?
bborisovs, qui ne fonctionne pas malheureusement. Brian, question intéressante, je me demandais ce trop. Ne crois pas que c'est possible mais..
La meilleure façon pour moi a été d'utiliser le javascript: var shiftWindow = function() { scrollBy(0, -50) }; if (location.hash) shiftWindow(); window.addEventListener("hashchange", shiftWindow);

OriginalL'auteur Brian | 2012-11-25

  1. 14

    Vous pouvez essayer absolument positionnement de "dummy" ancres de 40 pixels au-dessus de la partie supérieure de chaque section. Vous pouvez leur donner zéro largeur/hauteur cachés et de visibilité afin d'assurer que ces ancres ne pas affecter la façon dont votre page est affichée. Lorsque l'utilisateur clique sur un des liens dans votre barre de navigation fixe, la fenêtre de défilement vers le haut de la tétine, ancre, 40 pixels au-dessus du début de sa section.

    Exemple HTML:

    <div class="navbar">
  <a href="#anchor1">Anchor 1</a>
  <a href="#anchor2">Anchor 2</a>
  <a href="#anchor3">Anchor 3</a>
</div>
<div class="section">
  <span id="anchor1" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor2" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor3" class="anchor"></span>
  Section Content
</div>​

    Exemple CSS:

    body {
    padding-top: 40px;
}
.navbar {
    position: fixed;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 1px solid #ccc;
    background: #eee;
}
.section {
    position: relative;
}
.anchor {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    z-index: -1;
    top: -40px;
    left: 0;
    visibility: hidden;
}

    Pour un exemple, voir http://jsfiddle.net/HV7QL/

    Edit: CSS3 comprend également la :target pseudo-classe, qui s'applique à un élément dont la id a été référencé par le href d'un lien dans le document, ou la valeur de hachage de l'URL. Vous pouvez appliquer un 40 pixels de remplissage vers le haut de la :target qui seront appliqués uniquement à la section, l'utilisateur sélectionne à partir de la barre de navigation fixe.

    Exemple CSS:

    .section:target {
    padding-top: 40px;
}

    C'est sémantiquement plus propre que la méthode décrite ci-dessus, mais ne fonctionne pas sur les anciens navigateurs.

    De travail exemple: http://jsfiddle.net/5Ngft/

    Wow, votre deuxième réponse est vraiment sympa. Le seul problème je pense, c'est que pendant que votre cible # est toujours dans l'url, cet élément de conserver le rembourrage. Donc, si vous faites défiler vers le haut encore une fois, vous avez cette étrange lacune dans la page.
    Cela a fonctionné, mais ce n'est pas aussi propre que je le voudrais. J'ai plaisir à faire ce travail, mais le code pourrait certainement être plus propre.

    OriginalL'auteur Aaron

  2. 8

    Je suis tombé par hasard sur ce problème moi-même aujourd'hui, alors que j'avais pense déjà un peu, mais je crois que je viens de trouvé une solution:

    Ajouter un padding-top: 40px; margin-top: -40px à l'élément que vous voulez sauter. La marge négative annule le rembourrage, mais le navigateur continue à penser que le haut de l'élément est 40px plus élevé qu'il ne l'est réellement, car en fait, il est, seul le contenu de celui-ci commence à un niveau bas).

    Malheureusement, cela peut entrer en collision avec déjà définir les marges externes et internes, et si vous utilisez un arrière-plan sur l'élément ciblé, il va gâcher tout ça.

    Je vais voir si je peux travailler autour de cela et après un jsfiddle, mais en attendant, voici une réponse de base d'au moins 🙂

    édité: je pensais que j'avais une solution pour le fond, mais il ne fonctionne pas. Retiré à nouveau.

    montage final:
    Il n'genre de travail si vous connaissez la couleur d'arrière-plan de l'élément d'habillage. Dans mon exemple, je sais que le texte est sur un fond blanc, mais les titres ont un fond d'argent. Pour prévenir le titre d'un arrière-plan sur le rembourrage supplémentaire que nous avons défini, au lieu de cela je l'ai mis sur un pseudo-élément:

    #three:before { 
    content: " ";
    background: white;
    display: block;
    margin-top: -40px;
    padding-top: 40px;
}

    De cette façon, le rembourrage supplémentaire a un fond blanc à nouveau, mais cela fonctionne uniquement si vous savez déjà ce contexte, il est nécessaire. Le paramètre transparent par exemple va afficher le sous-jacent d'arrière-plan du titre lui-même, et non de l'article.

    jsFiddle: http://jsfiddle.net/Lzve6/
    Dirige l'un est celui par défaut, vous rencontrez des problèmes avec.
    Tête de deux, c'est ma première solution, garanti pour fonctionner sur presque tous les navigateurs
    Tête de trois est à l'aide de la :before pseudo-élément, pourrait ne pas fonctionner sur les navigateurs plus anciens.

    Cette foiré mes autres marges externes et internes que j'avais mis en place. Actuellement, j'ai mis: #contact{ display:block; text-align:center; margin:0 auto; background-color:rgba(255, 255, 255, 0.15); width:auto; padding:15px; margin:15px; }
    Est-il un moyen de combiner mes marges et padding avec vos modifications. Quelque chose comme margin:-40px 0px 0px 0px auto; padding:55px 15px 15px 15px;
    Bien sûr, mais vous devez les ajouter manuellement. Votre exemple devrait fonctionner 🙂

    OriginalL'auteur Stephan Muller