Wie versetze ich, wo meine feste Navigationsleiste mich hinbringt?

Question

Ich habe eine feste Navigationsleiste auf meiner Website, die oben bleibt mit Links, die mich zu verschiedenen Abschnitten weiter unten auf der Seite führen. Da jedoch meine feste Navigationsleiste eine Höhe von 40 Pixeln hat, ist der Anfang von 40 Pixeln jedes Abschnitts verdeckt. Wie versetze ich, wo meine Links mich mit HTML oder CSS um 40px bringen? Danke.

Answer 1

Sie können versuchen, "Dummy" Anker 40 Pixel über dem oberen Rand jedes Abschnitts absolut zu positionieren. Sie können ihnen eine Breite/Höhe von Null und eine versteckte Sichtbarkeit geben, um sicherzustellen, dass diese Anker die Darstellung Ihrer Seite nicht beeinflussen. Wenn der Benutzer auf einen der Links in der festen Navigationsleiste klickt, wird das Fenster an die Spitze des Dummy-Ankers verschoben, 40 Pixel über dem Anfang des aktuellen Abschnitts.

Beispiel 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>​ 

Beispiel 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; 
} 

Ein funktionstüchtiges Beispiel siehe http://jsfiddle.net/HV7QL/

Edit: CSS3 enthält auch die :target pseudo-Klasse, die gilt zu einem Element, dessen id durch diereferenziert wurdeeines Links im Dokument oder der Hash-Wert der URL. Sie können eine 40-Pixel-Füllung oben auf :target anwenden, die nur auf den Bereich angewendet wird, den der Benutzer aus der festen Navigationsleiste auswählt.

Beispiel CSS:

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

Dies ist semantisch sauberer als das oben beschriebene Verfahren, wird aber nicht ältere Browser arbeitet.

Arbeitsbeispiel: http://jsfiddle.net/5Ngft/

Answer 2

Ich bin zufällig über dieses Problem mich heute stolpern, so hatte ich ein bisschen darüber schon nachgedacht, aber ich glaube, ich habe gerade eine Lösung:

ein padding-top: 40px; margin-top: -40px das Element hinzufügen, die Sie springen mögen, zu. Der negative Rand bricht das Auffüllen ab, aber der Browser denkt immer noch, dass der obere Teil des Elements 40px höher ist als er tatsächlich ist (weil es tatsächlich ist, nur der Inhalt davon beginnt niedriger).

Leider kann dies mit bereits gesetzten Rändern und Paddings kollidieren, und wenn Sie einen Hintergrund auf das Zielelement verwenden, wird es alles durcheinander bringen.

Ich werde sehen, ob ich um die und Posten jsfiddle arbeiten kann, aber in der Zwischenzeit ist hier eine grundlegende Antwort zumindest :)

bearbeitet: Ich dachte, ich eine Lösung für den Hintergrund hatte, aber es hat nicht funktioniert. Wurde wieder entfernt.

final edit: Es funktioniert, wenn Sie die Hintergrundfarbe des Umhüllungselements kennen. In meinem Beispiel weiß ich, dass der Text auf einem weißen Hintergrund ist, aber die Titel haben einen silbernen Hintergrund. Um den Titel zu verhindern auf der extra Polsterung einen Hintergrund aus, die wir setzen, stattdessen habe ich es auf einem Pseudoelement, bevor es:

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

diese Weise wird die zusätzliche Polsterung hat einen weißen Hintergrund wieder, aber dies funktioniert nur, wenn Sie wissen bereits, welchen Hintergrund es benötigt. Wenn Sie sie beispielsweise auf transparent setzen, wird der Hintergrund des Titels selbst und nicht des Artikels angezeigt.

jsFiddle: http://jsfiddle.net/Lzve6/ Überschrift eins ist der Standard, mit dem Sie Probleme haben. Überschrift zwei ist meine erste Lösung, garantiert auf fast allen Browsern funktionieren Überschrift drei verwendet das :before Pseudo-Element, möglicherweise nicht auf older browsers arbeiten.