HTML + JS - Variation auf der schwebenden Titelleiste und Link zum benannten Anker Bug

Question

Ich habe eine Website mit einer schwebenden Titelleiste. (Code unten) Ich habe das Problem behoben, von dem Sie erwarten, dass ich nach ihm frage, aber ich habe noch ein anderes.

Ein häufiges Problem ist, wenn Sie auf einen Link zu einem Anker innerhalb der Seite klicken, deckt die Titelleiste das gewünschte Ziel, Anker #part2. Dies ist ein bekanntes Problem mit vielen Lösungen. (z. B. This stack question) Meine Lösung bestand darin, den Anker einfach anzuheben. Das funktioniert aber

• Wenn Sie den http://server/page.html#part2 Link in den Browser Adressleiste einfügen, es funktioniert.
• Wenn Sie auf den Link zum Anker innerhalb der Seite klicken, wird der Offset nicht berücksichtigt. Ich glaube es ist, weil, wenn wir auf den #part2 Link klicken, sagt der Browser "Ok, ich muss runterscrollen bis #part2. Lass mich Computer wo # Teil2 ist. Es ist bei y = 1.200 Pixel." (erfundene Nummer). Aber dann, wenn der Scroll startet, wird das Floating-Header-Div-Element zur relativen Positionierung hinaus geschwebt und die 1.200-Pixel-Zählung überschreitet.

Bitte zu sehen vollständiges Beispiel hier: https://jsfiddle.net/smorton/7p431smr/

Ich vermute, dass meine Lösungen sind eine andere Art und Weise zu finden, die Titelleiste zu schweben, oder einen Weg zu finden, um die Seite zu haben in der scroll() Funktion Offset neu berechnet. Aber ich brauche Hilfe bei beiden oder eine alternative Lösung.

aktualisieren

war ich nicht explizit, aber es ist mir wichtig, dass die schwimmende Titelleiste nicht am oberen Rand der Seite ist, wenn die Seite nach oben gescrollt wird. Genau wie in meinem Beispiel. Stellen Sie sich vor, dass diese Stapel-Seite oben ganz normal aussieht, aber wenn Sie einen kleinen Balken mit der Aufschrift "HTML + JS - Variation auf der schwebenden Titelleiste und Link zum benannten Anker-Bug" herunterscrollen, folgen Sie ihm. Die bisherigen Lösungen beruhen meiner Meinung nach darauf, die Titelleiste an die Spitze zu setzen, was ich nicht suche.

Lösung

Ok, am Ende habe ich ein anderes div um die Kopfleiste von festen 40px Höhe setzen nur so, dass, selbst wenn die Kopfleiste tauchte aus, dass 40px reserviert bleibt.

html:

<div id=header_placeholder> 
<div id=floatbar class=header> This is the header bar<br>It will follow as you scroll</div> 
</div> 

css:

#header_placeholder {height: 40px;} 

---

Schwimmdock Titelleiste jquery 1.11 Code: (bitte lieber jsfiddle Link)

$(window).scroll(function(){ 

    if ($(window).scrollTop() >= 100) 
    { 
     $("#floatbar").css({position:'fixed',top:'0'}); 
     $(".summary").css({margin: '0'}); 
    } 
    else 
    { 
     $("#floatbar").css({position: 'relative'}); 
     $(".summary").css({margin: '8 px 0'}); 
    } 
}); 

Answer 1

ich einige bin, was neu in HTML, aber haben Sie versucht, Prozentsätze anstelle von Pixeln verwendet wird, weil, wenn ich verwendet Pixel Verschiedene unerwartete Dinge

passiert

auch, Scheck http://www.codingbyte.com/how-to-create-a-fixed-header-and-footer-layout-in-html/ für Ihre Kopfzeile

Answer 2

Es scheint mir wie das Entfernen des Banners aus dem Fluss der Seite, vermasselt die Browser-Idee, wo Ihr benanntes Anker ist.

Wenn Sie es aus dem Fluss der Seite zu Beginn entfernen, haben Sie dieses Problem nicht. Sie können dies tun, indem Sie absolute Position auf Ihrer Überschrift verwenden, wenn Sie die Seite laden und dem Inhalt des Textblocks padding-top hinzufügen, um dessen Höhe zu berücksichtigen.

Ich habe deine Geige gegabelt, um dir zu zeigen, was ich meine.

https://jsfiddle.net/9c94va97/3/

wichtigsten Änderungen:

body { 

    padding-top:40px; 

} 

.header { 

    position:absolute; 
    top:0px; 

} 

Answer 3

Dies scheint funktionieren: https://jsfiddle.net/z8s7gugz/1/

Ein Nachteil dieses Ansatzes ist, dass die Scrollbar nicht den Raum des Kopf auch abdecken kann. Im Beispiel startet es 40px von oben.

body { padding: 0; margin: 0; } 
.header { 
    height: 40px; 
} 
.scrollcontent { 
    position: absolute; /* I'm not sure why this is needed, Chrome wont do the overflow without it */ 
    width: 100%; 
    height: calc(100% - 40px); 
    overflow: auto; 
} 

<div class="header"> This is the header bar<br>It will follow as you scroll</div> 
<div class="scrollcontent"> 
    [content] 
</div> 

Benötigt kein JavaScript, except for perhaps a fallback for the css calc.