El encabezado de página fijo se superpone a los anclajes en página

Si tengo un encabezado sin desplazamiento en una página HTML, fijado en la parte superior, que tiene una altura definida:

¿Hay alguna manera de usar el anclaje de URL (la #fragmentparte) para que el navegador se desplace a un cierto punto de la página, pero aún respete la altura del elemento fijo sin la ayuda de JavaScript ?

http://foo.com/#bar

Incorrecto (pero el comportamiento común): CORRECTO:
+ --------------------------------- + + -------------- ------------------- +
El | BAR ///////////////////// encabezado | El | //////////////////////// encabezado |
+ --------------------------------- + + -------------- ------------------- +
El | Aquí está el resto del texto | El | BAR |
El | ... | El | El |
El | ... | El | Aquí está el resto del texto |
El | ... | El | ... |
+ --------------------------------- + + -------------- ------------------- +

Yo tuve el mismo problema. Lo resolví agregando una clase al elemento de anclaje con la altura de la barra superior como el valor de relleno superior.

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

Y luego simplemente el CSS:

.anchor { padding-top: 90px; }

Si no puede o no quiere establecer una nueva clase, agregue un ::beforepseudo-elemento de altura fija a la :targetpseudo-clase en CSS:

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

O desplazarse por la página en relación :targetcon jQuery:

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

Yo uso este enfoque:

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

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

Agrega un elemento invisible antes de cada objetivo. Funciona IE8 +.

Aquí hay más soluciones: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

Respuesta adoptada oficial de Bootstrap:

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

Créditos

Unir

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

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

La mejor manera que encontré para manejar este problema es (reemplace 65 px con la altura de su elemento fijo):

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

Si no le gusta usar el selector de objetivos , también puede hacerlo de esta manera:

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

Nota: este ejemplo no funcionará si el elemento de destino tiene un color de fondo que difiere de su padre. por ejemplo:

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

en este caso, el color verde del elemento my-target sobrescribirá su elemento rojo padre en 65px. No encontré ninguna solución CSS pura para manejar este problema, pero si no tiene otro color de fondo, esta solución es la mejor.

Si bien algunas de las soluciones propuestas funcionan para enlaces de fragmentos (= enlaces hash) dentro de la misma página (como un enlace de menú que se desplaza hacia abajo), descubrí que ninguno de ellos funcionaba en Chrome actual cuando desea usar enlaces de fragmentos provenientes de otros páginas .

Llamar a www.mydomain.com/page.html#foo desde cero NO compensará su objetivo en Chrome actual con ninguna de las soluciones CSS o JS dadas.

También hay un informe de error jQuery que describe algunos detalles del problema.

SOLUCIÓN

La única opción que encontré hasta ahora que realmente funciona en Chrome es JavaScript que no se llama onDomReady pero con retraso.

// 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);
    }
}

RESUMEN

Sin un retraso JS, las soluciones probablemente funcionarán en Firefox, IE, Safari, pero no en Chrome.

A medida que la especificación CSS Scroll Snap entra en juego, es fácilmente posible con la scroll-margin-toppropiedad. Actualmente se ejecuta en Chrome y Opera (abril de 2019). También Safari 11+ debería admitir esto, pero no pude ejecutarlo en Safari 11. Probablemente tengamos que esperar a que los chicos lo arreglen allí.

Ejemplo de 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>

Para Chrome / Safari / Firefox, puede agregar ay display: blockusar un margen negativo para compensar el desplazamiento, como:

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

Ver ejemplo http://codepen.io/swed/pen/RrZBJo

Puedes hacer esto con jQuery:

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

¡Acabo de descubrir otra solución CSS pura que funcionó como un encanto para mí!

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

Encontrado en este sitio !

Podrías probar esto:

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

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

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

Establezca el valor de relleno superior a la altura real de su encabezado. Esto introducirá un pequeño espacio adicional en la parte superior de su encabezado, pero solo será visible cuando el usuario salte al ancla y luego se desplace hacia arriba. He creado esa solución para mi sitio en este momento, pero solo muestra una pequeña barra fija en la parte superior de la página, nada demasiado alto.

Lo tengo trabajando fácilmente con CSS y HTML, usando el método "ancla: antes" mencionado anteriormente. Creo que funciona mejor, porque no crea un relleno masivo entre tus divs.

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

No parece funcionar para el primer div de la página, pero puede contrarrestar eso agregando relleno a ese primer div.

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

Aquí hay un violín que funciona: http://jsfiddle.net/FRpHE/24/

Esto funciona para mi:

HTML LINK to Anchor:

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

Ancla HTML:

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

CSS:

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

Estoy usando la respuesta de @ Jpsy, pero por razones de rendimiento solo configuro el temporizador si el hash está presente en la 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();
      }
  };

Tuve muchos problemas con muchas de las respuestas aquí y en otros lugares, ya que mis anclas marcadas eran encabezados de sección en una página de preguntas frecuentes, por lo que compensar el encabezado no ayudó, ya que el resto del contenido simplemente se quedaría donde estaba. Así que pensé en publicar.

Lo que terminé haciendo fue una combinación de algunas soluciones:

1. El CSS:

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

Donde "120px" es la altura del encabezado fijo (quizás más un margen)

2. El enlace del marcador HTML:

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

3. El contenido marcado HTML:

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

Lo bueno de esta solución es que el spanelemento no solo está oculto, sino que está esencialmente colapsado y no rellena su contenido.

No puedo tomar mucho crédito por esta solución, ya que proviene de una gran cantidad de recursos diferentes, pero funcionó mejor para mí en mi situación.

Puedes ver el resultado real aquí .

No tuve suerte con la respuesta mencionada anteriormente y terminé usando esta solución que funcionó perfectamente ...

Cree un espacio en blanco donde desee establecer su ancla.

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

Y aplique la siguiente clase:

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

¡Esta solución funcionará incluso si las secciones tienen fondos de diferentes colores! Encontré la solución en este enlace.

Para mi mente purista, se siente algo hacky, pero como solución de solo CSS puede agregar relleno al elemento anclado activo usando el :targetselector:

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>

Me encontré con que tenía que usar tanto MutttenXd 's y Badabam soluciones CSS s' juntos, como la primera no funcionó en Chrome y el segundo no funcionaba en 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>
...

La forma en que me parece más limpia es la siguiente:

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

Un enfoque mínimamente intrusivo usando jQuery:

Enlace:

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

Contenido:

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

Guión:

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

Al asignar la clase de enlace de anclaje a los enlaces, el comportamiento de otros enlaces (como los acordeones o los controles de tabulación) no se ven afectados.

La pregunta no quiere JavaScript pero la otra pregunta más popular está cerrada debido a esta y no pude responder allí.

Necesitaba algo que funcione para enlaces entrantes, enlaces en la página, Y que JS pueda orientar para que la página pueda responder a los cambios en la altura del encabezado

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

El z-index: -1permite enlaces en el 'área de relleno' por encima de un fragmento de la diana de estar todavía puede hacer clic, como han comentado en @MuttenXd en su respuesta

Todavía no he encontrado un problema en IE 11, Edge 15+, Chrome 38+, FF 52+ o Safari 9.1+

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

Este código debería hacer el truco. Cambia 45 px por la altura de tu barra de encabezado.

EDITAR: si usar jQuery es una opción, también he tenido éxito usando jQuery.localScroll con un conjunto de valores de desplazamiento. La opción de desplazamiento es parte de jQuery.scrollTo, sobre la cual se basa jQuery.localScroll. Una demostración está disponible aquí: http://demos.flesler.com/jquery/scrollTo/ (segunda ventana, debajo de 'desplazamiento')

Aquí hay una solución completa de jquery que funcionará en IE:

Supongamos que los elementos de la barra de navegación son algo como esto:

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

Puede usar el siguiente fragmento de jquery para compensar el desplazamiento:

$(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) {

    });
}

Implementado usando :beforefuncionó muy bien hasta que nos dimos cuenta de que el pseudo elemento en realidad estaba cubriendo y bloqueando los eventos de puntero que se encontraban dentro del área del pseudo elemento. Usar algo como pointer-events: noneel :beforeo incluso directamente en el ancla no tuvo ningún efecto.

Lo que terminamos haciendo fue hacer que la posición del ancla sea absoluta y luego ajustar su posición para que sea el desplazamiento / altura del área fija.

Ancla de desplazamiento sin bloquear eventos de puntero

.section-marker {

    position: absolute;
    top: -300px;
}

El valor con esto es que no estamos bloqueando ningún elemento que pueda caer dentro de esos 300px. La desventaja es que tomar la posición de ese elemento de Javascript debe tener en cuenta ese desplazamiento, por lo que cualquier lógica allí tuvo que ser ajustada.

Así es como lo hice para finalmente ir al lugar apropiado cuando haces clic en la navegación. Agregué un controlador de eventos para los clics de navegación. Luego puede usar "scrollBy" para moverse hacia arriba en el desplazamiento.

var offset = 90;

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

Creé un div con algunos saltos de línea y le di la identificación, luego puse el código que quería mostrar debajo. El enlace lo llevaría al espacio sobre la imagen y el encabezado ya no estaría en el camino:

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

Por supuesto, puede cambiar el número de saltos de línea para satisfacer sus necesidades. Esto funcionó perfectamente para mí, aunque no estoy seguro si hay algún problema, todavía estoy aprendiendo HTML.

Usó este script

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

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

Creo que este enfoque es más útil:

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

Ahora puede usar scroll-margin-top , que es ampliamente adoptado .

Simplemente agregue el siguiente CSS al elemento al que desea desplazarse:

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