Navegación de página con encabezado fijo

Tengo un encabezado horizontal fijo en la parte superior de mi sitio y cuando uso la navegación de página para desplazarme a una ID, coloca el contenido al que bash desplazarme por debajo del encabezado.

¿Hay alguna manera de compensar el lugar donde aparece la navegación de la página en 80 píxeles (abajo)?

Editar: pude arreglarlo yo mismo de la manera más simple y aceptable posible. Puse la solución en una respuesta a continuación.

Bueno, como nadie más tenía una respuesta, la arreglé yo mismo.

Aquí está la solución:

JSFiddle

Esto se hizo creando un div oculto que está absolutamente posicionado ‘x’ cantidad de pixeles por encima del contenido al que quiero desplazarme. Luego me desplazo a ese div lugar del contenido al que originalmente quería desplazarme. ‘x’ debe ser la altura de su encabezado, de esta manera, el contenido que desea desplazarse aparece directamente debajo de su encabezado como debería.

Puedes hacer eso con CSS.

HTML:

 
Your Header Here
Rest of Content

CSS:

 header { position: fixed; height: 80px; } #main { margin-top: 80px; } 

Intenta leer este artículo de Chris Coyier. Él hábilmente utiliza un pseudo-elemento para resolver el problema “cabecera fija en la navegación de la página”. Eche un vistazo: http://css-tricks.com/hash-tag-links-padding/ .

El ejemplo no muestra cómo funciona. Lo arreglé agregando:

 #header { opacity:0.5; } #content-scroller { height:120px; }