Desplazamiento vertical de ID de hipervínculo y fragmentos Problema

Question

En la parte superior de la página hay una tira de menú posicionada estáticamente que sigue a la pantalla durante el desplazamiento.

Cuando se utiliza el enlace de fragmentos, la posición de desplazamiento debe compensarse con la altura de la banda de menú. ¿Cómo se puede lograr esto?

<a href="#fragment">Go to fragment</a> 
<div id="fragment">...</div> 

html { padding-top: 38px; } /* Offset page to allow for menu strip */ 
.menu-strip { position: fixed; top: 0; right: 0; left: 0; height: 38px; } 

¿Hay un cambio de CSS simple que se puede hacer para lograr esto?

De lo contrario, ¿hay una forma genérica para compensar el desplazamiento por 200px cuando se especifica un fragmento?

Answer 1

Lo que quiere hacer es hacer manejar su propio enlace hash. Una buena idea es agrupar todos sus a que enlazan hash. Por ejemplo

$(".ahashlink").click(function() { 

    var location = $(this).attr("href"); 
    var offset = $(location).offset().top; 
    $("body").scrollTop(offset+38); 
    return false; 
}); 

Esto se desplazará al lugar correcto MÁS 38 píxeles más (la altura de la barra superior). Sin embargo, esto no cambiará su URL en su navegador para contener el hash correcto. Esto se debe a que una vez que tenga window.location.hash = "#something", su ventana se desplazará automáticamente a ese hash. Así que tenlo en mente.

Answer 2

Este antiguo artículo tiene un HTML+CSS only solution.

La idea básica es utilizar el :before css selector a insertar algún contenido oculto antes de cada elemento enlazable para compensarlos:

<linked_elements>:before { 
    display: block; 
    content:" "; 
    margin-top: -<offset>; 
    height: <offset>; 
    visibility: hidden; 
} 

He aquí una de sus jsfiddledemo.

Esto también (creo) eliminar la necesidad de html { padding-top: 38px; }