Identyfikator hiperłącza i fragmentu Problem z przesunięciem pionowym

Question

U góry mojej strony znajduje się statycznie umieszczony pasek menu, który pojawia się podczas przewijania ekranu.

Podczas korzystania z łączenia fragmentów pozycja przewijania musi być przesunięta o wysokość paska menu. Jak można to osiągnąć?

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

Czy istnieje prosta zmiana CSS, którą można wprowadzić, aby to osiągnąć?

Czy istnieje ogólny sposób na przesunięcie przewijania o 200 pikseli po określeniu fragmentu?

Answer 1

To, co chcesz zrobić, to załatać własne połączenie hash. Dobrym pomysłem jest grupowanie wszystkich twoich a, które łączą hash. Na przykład:

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

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

Spowoduje to przewinięcie do właściwego miejsca PLUS 38 dodatkowych pikseli (wysokość górnego paska). To jednak nie zmieni adresu URL w przeglądarce, aby zawierał właściwy skrót. Dzieje się tak dlatego, że po uzyskaniu window.location.hash = "#something" twoje okno automatycznie przejdzie do tego skrótu. Miej to na uwadze.

Answer 2

Ten stary artykuł ma numer HTML+CSS only solution.

Podstawową ideą jest użycie :before css selector wstawić jakąś ukrytą zawartość przed każdym elemencie możliwość połączenia ich offset:

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

Oto jsfiddle ich demo.

Będzie to również (chyba) usunąć potrzebę html { padding-top: 38px; }