L'intestazione di pagina fissa si sovrappone alle ancore in-page

Se ho un'intestazione senza scorrimento in una pagina HTML, fissata in alto, con un'altezza definita:

C'è un modo per usare l'ancoraggio URL (la #fragmentparte) per far scorrere il browser fino a un certo punto della pagina, ma rispettare comunque l'altezza dell'elemento fisso senza l'aiuto di JavaScript ?

http://foo.com/#bar

SBAGLIATO (ma il comportamento comune): CORRETTO:
+ --------------------------------- + + -------------- ------------------- +
| BAR ///////////////////// header | | //////////////////////// |
+ --------------------------------- + + -------------- ------------------- +
| Ecco il resto del testo | | BAR |
| ... | | |
| ... | | Ecco il resto del testo |
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- +

Ho avuto lo stesso problema. L'ho risolto aggiungendo una classe all'elemento di ancoraggio con l'altezza della barra superiore come valore di riempimento superiore.

<h1><a class="anchor" name="barlink">Bar</a></h1>

E poi semplicemente il css:

.anchor { padding-top: 90px; }

Se non puoi o non vuoi impostare una nuova classe, aggiungi uno ::beforepseudo-elemento ad altezza fissa alla :targetpseudo-classe in CSS:

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

Oppure scorri la pagina rispetto a :targetcon jQuery:

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

Uso questo approccio:

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

Aggiunge un elemento invisibile prima di ogni target. Funziona IE8 +.

Ecco altre soluzioni: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

Risposta adottata Bootstrap ufficiale:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden; 
}

Crediti

Merge

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

da: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Il modo migliore che ho trovato per gestire questo problema è (sostituire 65 px con l'altezza dell'elemento fisso):

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

Se non ti piace utilizzare il selettore di destinazione , puoi farlo anche in questo modo:

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

Nota: questo esempio non funzionerà se l'elemento target ha un colore di backgound diverso dal suo genitore. per esempio:

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

in questo caso il colore verde dell'elemento my-target sovrascriverà l'elemento rosso padre in 65px. Non ho trovato alcuna soluzione CSS pura per gestire questo problema, ma se non hai un altro colore di sfondo questa soluzione è la migliore.

Mentre alcune delle soluzioni proposte funzionano per collegamenti a frammenti (= collegamenti hash) all'interno della stessa pagina (come un collegamento a menu che scorre verso il basso), ho scoperto che nessuna di loro ha funzionato nell'attuale Chrome quando si desidera utilizzare collegamenti a frammenti provenienti da altri pagine .

Quindi, chiamare www.mydomain.com/page.html#foo da zero NON compenserà il tuo obiettivo nell'attuale Chrome con nessuna delle soluzioni CSS o JS fornite.

C'è anche una segnalazione di bug jQuery che descrive alcuni dettagli del problema.

SOLUZIONE

L'unica opzione che ho trovato finora che funziona davvero in Chrome è JavaScript che non si chiama onDomReady ma con un ritardo.

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

SOMMARIO

Senza un ritardo JS, le soluzioni funzioneranno probabilmente in Firefox, IE, Safari, ma non in Chrome.

Quando le specifiche CSS Snap Snap entrano in gioco, è facilmente possibile con la scroll-margin-topproprietà. Attualmente funziona su Chrome e Opera (aprile 2019). Anche Safari 11+ dovrebbe supportare questo, ma non sono stato in grado di eseguirlo su Safari 11. Probabilmente dobbiamo aspettare che i ragazzi lo riparino lì.

Esempio Codepen

body {
  padding: 0;
  margin: 0;
}

h1,
p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
  position: sticky;
  top: 0;
  background-color: red;
  text-align: center;
  padding: 1rem;
}
.header .scroll {
  display: block;
  color: white;
  margin-bottom: 0.5rem;
}
.header .browsers {
  color: black;
  font-size: 0.8em;
}

<header class="header">
  <a class="scroll" href="#heading">Scroll to heading</a>
  <span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris. 
</p>

Per Chrome / Safari / Firefox è possibile aggiungere un display: blocke utilizzare un margine negativo per compensare l'offset, come:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

Vedi esempio http://codepen.io/swed/pen/RrZBJo

Puoi farlo con jQuery:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

Ho appena scoperto un'altra soluzione CSS pura che ha funzionato come un incanto per me!

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

Trovato su questo sito !

Puoi provare questo:

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

Imposta il valore di riempimento superiore all'altezza effettiva dell'intestazione. Ciò introdurrà un leggero spazio aggiuntivo nella parte superiore dell'intestazione, ma sarà visibile solo quando l'utente salterà sull'ancora e quindi scorrerà verso l'alto. Ho inventato quella soluzione per il mio sito in questo momento, ma mostra solo una piccola barra fissa nella parte superiore della pagina, niente di troppo alto.

Ho funzionato facilmente con CSS e HTML, usando il metodo "anchor: before" di cui sopra. Penso che funzioni al meglio, perché non crea imbottiture enormi tra i tuoi div.

.anchor:before {
  content:"";
  display:block;
  height:60px; /* fixed header height*/
  margin:-60px 0 0; /* negative fixed header height */
}

Non sembra funzionare per il primo div sulla pagina, ma puoi contrastarlo aggiungendo il riempimento al primo div.

#anchor-one{padding-top: 60px;}

Ecco un violino funzionante: http://jsfiddle.net/FRpHE/24/

Per me funziona:

HTML LINK to Anchor:

<a href="#security">SECURITY</a>

Ancora HTML:

<a name="security" class="anchor"></a>

CSS:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

Sto usando la risposta di @ Jpsy, ma per motivi di prestazioni sto impostando il timer solo se l'hash è presente nell'URL.

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

function delayedFragmentTargetOffset(){
      var offset = $(':target').offset();
      if(offset){
          var scrollto = offset.top - 80; // minus fixed header height
          $('html, body').animate({scrollTop:scrollto}, 0);
          $(':target').highlight();
      }
  };

Ho avuto molti problemi con molte delle risposte qui e altrove poiché le mie ancore con segnalibri erano intestazioni di sezione in una pagina FAQ, quindi compensare l'intestazione non ha aiutato in quanto il resto del contenuto sarebbe rimasto dove si trovava. Quindi ho pensato di pubblicare un post.

Quello che ho finito per fare è stato un insieme di alcune soluzioni:

1. Il CSS:

   .bookmark {
       margin-top:-120px;
       padding-bottom:120px; 
       display:block;
   }

Dove "120px" è l'altezza della testata fissa (forse più un po 'di margine).

2. Il link del segnalibro HTML:

   <a href="#01">What is your FAQ question again?</a>

3. Il contenuto HTML con segnalibro:

   <span class="bookmark" id="01"></span>
   <h3>What is your FAQ question again?</h3>
   <p>Some FAQ text, followed by ...</p>
   <p>... some more FAQ text, etc ...</p>

La cosa positiva di questa soluzione è che l' spanelemento non è solo nascosto, è essenzialmente collassato e non riempie i tuoi contenuti.

Non posso prendere molto credito per questa soluzione poiché proviene da una serie di risorse diverse, ma ha funzionato meglio per me nella mia situazione.

Puoi vedere il risultato reale qui .

Non ho avuto fortuna con la risposta sopra elencata e ho finito per usare questa soluzione che ha funzionato perfettamente ...

Crea un intervallo vuoto in cui desideri impostare l'ancora.

<span class="anchor" id="section1"></span>
<div class="section"></div>

E applica la seguente classe:

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

Questa soluzione funzionerà anche se le sezioni hanno sfondi di colore diverso! Ho trovato la soluzione a questo link.

Mi sembra un po 'confuso per la mia mente purista ma come soluzione solo per CSS puoi aggiungere imbottitura all'elemento ancorato attivo usando il :targetselettore:

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

Ho trovato ho dovuto usare sia MutttenXd 's e Badabam ' soluzioni CSS s insieme, come il primo non ha funzionato in Chrome e la seconda non ha funzionato in Firefox:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

Il modo in cui trovo di essere il più pulito è il seguente:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

Un approccio minimamente invadente utilizzando jQuery:

link:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

Soddisfare:

<h3 id="my-anchor-1">Here is Anchor 1</a>

script:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

Assegnando la classe anchor-link ai collegamenti, il comportamento di altri collegamenti (come fisarmonica o controlli tab) non viene influenzato.

La domanda non vuole JavaScript, ma l'altra domanda più popolare è chiusa a causa di questa e non ho potuto rispondere lì.

Avevo bisogno di qualcosa che funzioni per i collegamenti in entrata, i collegamenti a pagina e che possano essere scelti come target da JS in modo che la pagina possa rispondere alle modifiche dell'altezza dell'intestazione

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2> 

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

Il z-index: -1permette collegamenti nella 'zona padding' sopra un frammento-bersaglio di essere ancora cliccabile, come commentato da @MuttenXd sulla sua risposta

Non ho ancora riscontrato un problema in IE 11, Edge 15+, Chrome 38+, FF 52+ o Safari 9.1+

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

Questo codice dovrebbe fare il trucco. Scambia 45px per l'altezza della barra dell'intestazione.

EDIT: se usare jQuery è un'opzione, ho anche avuto successo usando jQuery.localScroll con un set di valori di offset. L'opzione offset fa parte di jQuery.scrollTo, su cui si basa jQuery.localScroll. Una demo è disponibile qui: http://demos.flesler.com/jquery/scrollTo/ (seconda finestra, sotto 'offset')

Ecco una soluzione jquery completa che funzionerà in IE:

Supponiamo che gli elementi della barra di navigazione siano qualcosa del genere:

<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>

È possibile utilizzare il seguente frammento jquery per compensare lo scorrimento:

$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}

Implementato usando :beforefunzionava alla grande fino a quando non ci siamo resi conto che lo pseudo elemento stava effettivamente coprendo e bloccando eventi puntatore che si trovavano all'interno dell'area dello pseudo elemento. Usando qualcosa di simile pointer-events: nonesul :beforeo anche direttamente sull'ancora non ha avuto effetto.

Ciò che abbiamo finito per fare è stato rendere assoluto il posizionamento dell'ancora e quindi regolare la sua posizione in modo che fosse l'offset / altezza dell'area fissa.

Ancoraggio offset senza bloccare gli eventi del puntatore

.section-marker {

    position: absolute;
    top: -300px;
}

Il valore è che non stiamo bloccando alcun elemento che potrebbe rientrare in quei 300 pixel. Il rovescio della medaglia è che afferrare la posizione di quell'elemento da Javascript deve tener conto dell'offset, quindi ogni logica deve essere modificata.

Questo è come l'ho ottenuto per andare finalmente nel posto giusto quando fai clic sulla navigazione. Ho aggiunto un gestore eventi per i clic di navigazione. Quindi puoi semplicemente usare "scrollBy" per spostarti verso l'alto sull'offset.

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });

Ho creato un div con alcune interruzioni di riga e ho dato l'id, quindi ho messo il codice che volevo mostrare sotto. Il link ti porterebbe quindi nello spazio sopra l'immagine e l'intestazione non sarebbe più in mezzo:

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

Naturalmente, puoi modificare il numero di interruzioni di riga in base alle tue esigenze. Questo ha funzionato perfettamente per me, non sono sicuro che ci siano problemi, sto ancora imparando HTML.

Usato questo script

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});

Penso che questo approccio sia più utile:

<h2 id="bar" title="Bar">Bar</h2>

[id]:target {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

[id]:target::before {
    content: attr(title);
    top: 120px;
    position: relative;
    visibility: visible;
}

Ora puoi usare scroll-margin-top , che è abbastanza ampiamente adottato .

Basta aggiungere il seguente CSS all'elemento che si desidera scorrere:

.element {
  scroll-margin-top: 2em;
}