Encabezado adhesivo y enlaces internos

He usado css para hacer un "encabezado fijo" que siempre está visible en la parte superior de la página y el otro contenido debajo de él. En el encabezado tengo algunos enlaces internos. El problema es que cuando se hace clic en un enlace, la página se desplaza para que el objetivo se ubique en la parte superior de la página, oculto por mi encabezado fijo, en lugar de justo debajo de él.Encabezado adhesivo y enlaces internos

¿Alguna sugerencia para resolver este problema?

css:

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3.5em; 
    padding:0; 
    margin: 0; 
} 

#container { 
    width: 100%; 
    margin: 3.5em 0 0 0; 
    padding: 0; 
    overflow:auto; 
} 

#content { 
    padding: 0 4em; 
    margin: 0; 
}

html:

<body> 

    <div id="header"> 
     <div id="content"> 
      <p> 
       <a href="#xyz">XYZ</a> 
      </p> 
     </div> <!--end content--> 
    </div> <!--end header--> 

    <div id="container"> 
     <div id="content"> 
      <p>A lot of text.</p> 
      <a name="xyz"></a> 
      <p>A lot of text</p> 
     </div><!--end content--> 
    </div><!--end container--> 

</body>

Fuente

2011-10-10 user635817

Una cosa simple de hacer es colocar el <a name="xyz"></a> un poco más arriba en el texto.

Esto requeriría un poco de prueba y error, pero podría ser lo más rápido/más fácil de hacer.

Otra cosa que podría hacer es añadir dinámicamente margin o padding cuando se hace clic en el enlace.

Fuente

2011-10-10 19:59:03

También puede establecer un margen superior tan alto como el encabezado fijo para su fragmento xyz en su archivo CSS. Eso podría dar como resultado un vacío en la página HTML resultante ...

Fuente

2011-10-10 20:03:43 supertopi

Comience con la obtención de identificaciones únicas para la parte del contenido en el encabezado y dentro del contenedor. Tal vez puedas poner un ul dentro del encabezado para los enlaces internos. Establece la posición del contenido dentro del envoltorio absoluto, et voila!

¿Hay algún lugar donde podamos ver su problema?

Fuente

2011-10-10 20:08:20 oceanmountain

Un poco de Javascript (jQuery utiliza aquí) puede hacerlo:

$('#header a').click(function (e) { 
    e.preventDefault(); 

    var offset = $('a[name=' + $(this).attr('href').substr(1) + ']').offset(); 

    $('html, body').animate({ scrollTop: offset.top - $('#header').outerHeight() }, 'fast'); 
});

Esto encuentra el elemento con un atributo de nombre que coincida con el atributo href del enlace de clic y, a continuación, se anima un desplazamiento para que posición del elemento menos la altura del encabezado.

http://jsfiddle.net/blineberry/bTa8b/

Fuente

2011-10-10 20:24:57 Brent

En primer lugar, es mejor utilizar bloques con id en lugar de name - es más de forma estándar.

Luego, agregue clase a un anclaje y luego haga que tenga una posición absoluta + muévala con una parte superior negativa margin igual a la altura del encabezado.

Mira esta violín: http://jsfiddle.net/kizu/gfXJJ/

O, alternativamente, para los navegadores que soportan los pseudo-elementos, se puede añadir una con la altura deseada y compensar su altura por margen superior negativo, por lo que equivaldría como el inicio del bloque al que harías un enlace. De este modo, puede agregar id a elementos ya existentes en lugar de crear elementos adicionales.

Aquí es una versión con pseudo-elemento: http://jsfiddle.net/kizu/gfXJJ/2/

o puede agregar superior padding y negativa margin a un elemento con id sí: http://jsfiddle.net/kizu/gfXJJ/2/ - pero en ese caso no puede haber problemas con los fondos en ella, ' porque el bloque se extiende físicamente en la parte superior.

Fuente

2011-10-10 21:01:45 kizu

Funciona perfectamente, gracias! – user635817

@ user635817 Acepte oficialmente la respuesta de kizu. – Brent

Creo que esta pregunta se superpone a la de este enlace: offsetting an html anchor to adjust for fixed header que ofrece incluso más soluciones posibles. Creo que las preguntas podrían fusionarse, pero no tengo los privilegios para hacer eso. (Que es la misma razón por la que estoy ingresando esto como respuesta, aunque sé que debería haber sido un comentario. Pero no puedo comentar.)

Fuente

2014-09-12 10:01:59 Bartenstein

Parece que los pseudo elementos no funcionan en todos los escenarios. Tuve suerte simplemente aplicando un margen superior negativo y un margen superior positivo para compensar el margen negativo.

por ejemplo. <a id="xyz" style="margin-top:-50px; padding-top:50px">Title</a>

Fuente

2017-11-03 18:09:08

Encabezado adhesivo y enlaces internos

Respuesta

Cuestiones relacionadas