Przyklejony nagłówek i wewnętrzne linki

Użyłem css do utworzenia "lepkiego nagłówka", który jest zawsze widoczny u góry strony, a druga zawartość umieszczona pod nim. W nagłówku mam linki wewnętrzne. Problem polega na tym, że po kliknięciu łącza strona jest przewijana w taki sposób, aby cel znajdował się u góry strony - ukryty przez mój lepki nagłówek - zamiast tuż pod nim.Przyklejony nagłówek i wewnętrzne linki

Wszelkie sugestie, jak rozwiązać ten problem?

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>

Źródło

2011-10-10 user635817

Prostym rozwiązaniem jest umieszczenie <a name="xyz"></a> nieznacznie wyżej tekście.

Wymagałoby to pewnych prób i błędów, ale może to być najszybsza/najłatwiejsza rzecz.

Inną rzeczą, jaką można zrobić, to dynamicznie dodać margin lub padding po kliknięciu łącza.

Źródło

2011-10-10 19:59:03

Można również ustawić górny margines tak wysoki, jak lepki nagłówek dla fragmentu Xyz w pliku CSS. Może to spowodować pustą lukę na stronie wynikowej HTML ...

Źródło

2011-10-10 20:03:43 supertopi

Zacznij od uzyskania unikalnych identyfikatorów dla części treści w nagłówku i wewnątrz kontenera. Być może możesz umieścić ul wewnątrz nagłówka dla wewnętrznych linków. Ustaw pozycję treści wewnątrz absolutnego opakowania, i voila!

Czy jest jakieś miejsce, w którym możemy rzucić okiem na twój problem?

Źródło

2011-10-10 20:08:20 oceanmountain

Trochę javascript (jQuery tu użyty) może to zrobić:

$('#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'); 
});

ten znajdzie element z atrybutem name, który pasuje href atrybutem link kliknięty, a następnie animuje zwój do tego pozycja elementu pomniejszona o wysokość nagłówka.

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

Źródło

2011-10-10 20:24:57 Brent

Na początku, to lepiej użyć bloków id zamiast name - to bardziej standardowy sposób.

Następnie dodaj klasę do kotwicy, a następnie ustaw ją w pozycji absolutnej + przesuń ją o ujemną górę margin równą wysokości nagłówka.

Spójrz na to ryba: http://jsfiddle.net/kizu/gfXJJ/

Lub alternatywnie dla przeglądarek, które obsługują pseudo-elementy, można dodać jeden z żądanej wysokości i kompensować to wysokość ujemnym górnego marginesu, więc byłoby to równoznaczne jako początek bloku, do którego utworzysz link. W ten sposób można dodać elementy już istniejące, zamiast tworzyć dodatkowe.

Oto wersja z pseudo-elementu: http://jsfiddle.net/kizu/gfXJJ/2/

lub można dodać górną padding i negatywne margin do elementu z id samego: http://jsfiddle.net/kizu/gfXJJ/2/ - ale w tym przypadku nie mogą być problemy z tła na nim " ponieważ blok jest fizycznie rozciągnięty u góry.

Źródło

2011-10-10 21:01:45 kizu

Działa doskonale, dzięki! – user635817

@ user635817 Oficjalnie zaakceptuj odpowiedź Kizu. – Brent

Uważam, że to pytanie pokrywa się z tym w linku: offsetting an html anchor to adjust for fixed header, który oferuje jeszcze więcej możliwych rozwiązań. Uważam, że pytania mogłyby zostać połączone, ale nie mam na to uprawnień. (Z tego samego powodu wpisuję to jako odpowiedź, chociaż wiem, że powinien to być komentarz, ale nie wolno mi tego komentować.)

Źródło

2014-09-12 10:01:59 Bartenstein

Pseudo elementy nie działają we wszystkich scenariuszach. Miałem szczęście, stosując jedynie ujemny górny margines i dodatnie górne dopełnienie, by zrównoważyć ujemną marżę.

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

Źródło

2017-11-03 18:09:08

Przyklejony nagłówek i wewnętrzne linki

Odpowiedz

Powiązane problemy