Ankerpunkt & fixer Header

Ankerpunkt & fixer Header

In diesem Blogeintrag geht es um eine Problemlösung im Bereich Webentwicklung.

Problem

Das Problem besteht darin, dass man einen fixen bzw. floating Header verwendet und nun auf einer Seite Ankerpunkte verwenden und über das Menü ansteuern will.
Zwar wird der Ankerpunkt grundlegend korrekt angesprungen, jedoch wird das angedachte Element vom fixen Header überlagert, so dass beispielsweise eine wichtige Überschrift nicht auf Anhieb zu sehen ist.

Lösung

Um dieses Problem zu lösen, muss ein Element vor dem eigentlich anvisierten Element eingefügt und zum Ankerpunkt gemacht werden.
Zusätzlich muss dieses Element die Höhe des Headers haben. Damit das Element keine ungewollten Abstände verursacht, wird mittels negativen margin, die Höhe des Headers wieder abgezogen und das Element zusätzlich versteckt.

Struktur vorher:

<div class="header" style="position: fixed; top: 0;"></div>
<a href="#anchor1">Anker1</a>
...
<div class="section" id="anchor1"></div>

Struktur nachher:

<span class="anchor" id="anchor1"></span>
<div class="section"></div>

CSS:

.anchor {
display: block;
height: 100px; /* header height */
margin-top: -100px; /* header height */
visibility: hidden;
}

Ankerpunkt & fixer Header
Artikel bewerten

Schreibe einen Kommentar