Cubiertas adhesivas de encabezado Texto de anclaje

Tengo un encabezado fijo que flota sobre el resto de la página. Cuando me enlace a los anclajes de la página, por supuesto, se desplaza para que el anclaje esté en la parte superior de la página. Sin embargo, cuando esto sucede, el encabezado cubre el texto debajo.Cubiertas adhesivas de encabezado Texto de anclaje

¿Hay alguna manera de arreglar esto? No puedo mover el ancla porque hay muchos en la página y cada uno tiene una cantidad de texto diferente. Mi primer pensamiento fue de alguna manera desplazarse a cierta altura sobre el ancla.

Gracias, David

Fuente

2012-05-18 hoytdj

No sin JavaScript, creo. –

No necesariamente es el mejor enfoque, pero si su diseño/diseño lo permite, podría darle al ancla un relleno superior igual a la altura del encabezado. – Steve

exactamente lo que iba a decir, aunque depende de qué tan alto sea su encabezado ... –

El: pseudodiana elemento podría ser lo que usted está buscando. Con: objetivo puede abordar el elemento que se señala con la marca #. Lea más sobre esto here

Fuente

2012-05-18 22:00:56 albin

El: selector de destino parece que podría ser lo que quiero. Pero, entonces, ¿cómo puedo hacer que la ventana se mueva hacia abajo solo con CSS? Puedo usar Javascript por supuesto, pero preferiría no hacerlo. – hoytdj

La página se desplazará hacia abajo tal como lo hacía antes, pero ahora con el selector de destino, agrega algo de relleno para empujar el elemento hacia abajo. Para que ya no esté oculto por el encabezado fijo. – albin

me encontré con el mismo problema, terminó haciendo una regla como esta:

A.named:target { 
    display: inline-block; 
    height: 120px; 
    margin-top: -120px; 
}

Luego aplica la clase "llamado" a cualquier etiqueta de anclaje que yo quiero el navegador para desplazarse a. Esto agrega 120px de espacio entre la parte superior del navegador y la parte inferior del elemento que contiene el ancla, aproximadamente 80px para el encabezado, y otro 40px para compensar la altura de los encabezados H2 a los que estaba vinculando ... Y, con el margen negativo cancela el positivo, no afecta el aspecto de mi página.

Espero que esto ayude!

Fuente

2014-06-25 16:47:38 Ben

Cubiertas adhesivas de encabezado Texto de anclaje

Respuesta

Cuestiones relacionadas