oberer Abstand für Anker

[Sprint]

Hallo zusammen,

ich habe auf einer Seite mehrere Bereiche, die über Anker angesprungen werden. Nun ist das Problem, daß am oberen Rand der Seite eine fixe Leiste ist, unter der die Seite weg scrollt. Wird jetzt ein Anker angesprungen, rollt der bis an den oberen Rand des Fensters und der obere Teil des angesprungenen Bereiches verschwindet unter dem Seitenkopf.
Im Moment wird das Scrolling per CSS durchgeführt, es ist aber bei reinem HTML ohne Animation und auch bei JS gestütztem Scrolling das selbe.

Kann man das Ziel des Ankers irgendwie an den unteren Rand des Seitenkopfes legen?

 

[Sempervivum]

Das Problem wurde gerade in einem anderen Thread diskutiert, aber ich habe ihn nicht mehr zu Hand.
Lösungsmöglichkeiten:

1. Den Containern, die das Sprungziel sind, jeweils oben ein Padding verpassen. Nachteile:
Dieser Abstand wird beim normalen Scrollen sichtbar und zerreißt das Layout.
Man muss sich auf einen festen Wert fest legen, wodurch das Ganze nicht mehr responsiv ist.

2. Die fixe Leiste aus dem scrollbaren Bereich heraus nehmen und nur über die Bereiche, die angesprungen werden sollen, scrollen. Hier eine Demo:
Demo Header Footer Content Scrollable

3. Die Scrollposition mit Javascript berechnen, dann kannst Du problemlos die Höhe der fixen Leiste berücksichtigen.

 

[Sprint]

Stimmt, die erste Möglichkeit geht gar nicht.

Ob die beiden anderen aber funktionieren? Ich weiß nicht, ob du dir die Seite mal angesehen hast. Die Kopfleiste ist ja auch nicht wirklich fix. Die ändert sich auch beim Scrollen und in Abhängigkeit von der Fenstergröße.

 

[Sempervivum]

Doch, angesehen habe ich mir die Seite schon, aber ich überblicke dabei nicht, wie es sich auswirkt, dass sich die Kopfleiste beim Scrollen verändert. Dürfte eine Berechnung mit Javascript komplizierter machen, weil ich zunächst daran gedacht hatte, gleich am Anfang die Endposition zu berechnen.
Bei Lösung 2 erwarte ich, dass es sich automatisch anpasst durch das flex: 1;.

 

[Sempervivum]

PS: Noch mal ausprobiert bei deiner Seite: Wenn "Workshops (Kulmbach)" oben ist, hat die Kopfleiste ihre geringste Höhe erreicht, d. h. es dürfte ausreichen, wenn man diese bei der Berechnung verwendet.

 

[Sprint]

Danke für deinen Denkanstoß.

Ich hatte mich intensiver mit Version 3 auseinandergesetzt und bin dann über verschiedene Scripte auf einen Thread bei stackoverflow gestoßen. Und dann war alles ganz einfach. Jquery bringt doch alles schon mit.

$('html, body').animate({scrollTop: $('#'+ziel).offset().top -100 }, 'slow');

 

[Sempervivum]

Ja, Stackoverflow liefert häufig eine Lösung. Du verwendest jetzt einen festen Wert, den Du subtrahierst. Gibt es da keine Probleme, wenn die Inhalte in der Kopfleiste bei schmalerem Browserfenster umbrechen?

 

[Sprint]

Stimmt, daran hatte ich nicht gedacht. Hab das jetzt mal ausprobiert, die Höhe der Kopfleiste auszulesen. Wenn ich aber statt des festen Wertes eine Variable einsetze, wird die nicht erkannt und ich bekomme einen Syntax Error.
Ich habe den Wert jetzt noch etwas erhöht und damit sollte es hinkommen.