Come faccio a spostare dove mi porta la barra di navigazione fissa?

Question

Ho una barra di navigazione fissa sul mio sito web che rimane in alto con collegamenti che mi portano a diverse sezioni più in basso nella pagina. Tuttavia, poiché la barra di navigazione fissa ha un'altezza di 40 px, l'inizio di 40 pixel di ogni sezione viene coperto. Come dovrei compensare il punto in cui i miei link mi portano da 40px usando HTML o CSS? Grazie.

Answer 1

Si potrebbe provare assolutamente posizionando ancoraggi "fittizi" 40 pixel sopra la parte superiore di ogni sezione. Puoi dare loro zero larghezza/altezza e visibilità nascosta per garantire che questi ancoraggi non influiscano sul modo in cui viene visualizzata la pagina. Quando l'utente fa clic su uno dei link nella barra di navigazione fissa, la finestra scorrerà fino alla cima dell'ancora fittizia, 40 pixel sopra l'inizio della sua sezione effettiva.

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

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

Per un esempio di lavoro, vedere http://jsfiddle.net/HV7QL/

Edit: CSS3 include anche il :target pseudo-classe, che si applica a un elemento di cui id è stato referenziato dallo href di un link nel documento o il valore hash dell'URL. Puoi applicare una imbottitura da 40 pixel nella parte superiore di :target che verrà applicata solo alla sezione selezionata dall'utente dalla barra di navigazione fissa.

Esempio CSS:

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

Questo è semanticamente più pulita rispetto al metodo descritto in precedenza, ma non funziona su browser più vecchi.

esempio di lavoro: http://jsfiddle.net/5Ngft/

Answer 2

Mi è capitato di incappare in questo problema io stesso oggi così avevo pensato a questo proposito già da un po ', ma penso che ho appena trovato una soluzione:

Aggiungi un padding-top: 40px; margin-top: -40px per l'elemento che si desidera passare a. Il margine negativo annulla il padding, ma il browser pensa ancora che la parte superiore dell'elemento sia 40px più alta di quanto non sia in realtà (perché in effetti lo è, solo il suo contenuto inizia più in basso).

Sfortunatamente, questo potrebbe entrare in collisione con margini e paddings già impostati, e se si sta usando uno sfondo sull'elemento mirato, si tratterà di tutto.

Vedrò se riesco a risolvere questo e inviare un jsfiddle, ma nel frattempo ecco una risposta di base almeno :)

a cura: pensavo di avere una soluzione per lo sfondo, ma non ha funzionato Rimosso di nuovo.

modifica finale: Funziona se si conosce il colore di sfondo dell'elemento di spostamento. Nel mio esempio, so che il testo è su uno sfondo bianco, ma i titoli hanno uno sfondo argentato. Per evitare che il titolo di avere un background sul chilo in più abbiamo impostato, invece ho messo su un pseudo-elemento prima:

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

In questo modo il chilo in più ha di nuovo uno sfondo bianco, ma questo funziona solo se sai già di quale sfondo ha bisogno. Ad esempio, impostandolo su trasparente mostrerà lo sfondo sottostante del titolo stesso, non dell'articolo.

jsFiddle: http://jsfiddle.net/Lzve6/ Il primo è quello predefinito con cui si verificano problemi. L'intestazione due è la mia prima soluzione, garantita per funzionare su quasi tutti i browser L'intestazione tre utilizza lo pseudoelemento :before, potrebbe non funzionare su older browsers.