Fixed Header: Position der Ankerlinks ändern

Wer einen Stickey-Header, also eine Navigationsliste, die am oberen Bildschirmrand fixiert ist, nutzt, wird bei der gleichzeitigen Verwendung von Sprungpunkten merken, dass die vom Sprunglink angepeilte Kante hinter der fixierten Navigation liegt.

Das Problem lässt sich mittels CSS umgehen:

  1. Dem Link eine Klasse zuweisen, z.B. .top
  2. .top bekommt dann folgende CSS-Eigenschaften zugewiesen:{display: block; position: relative; top: <hier Höhe des Headers einfügen> px; visibility: hidden;}

Und schon ist der Sprungpunkt entsprechend positioniert und landet sauber im sichtbaren Bereich der Webseite.

Jonathan

Jurist, Freizeit-Nerd, Webdesigner und Inhaber von jst-media.de

3 thoughts to “Fixed Header: Position der Ankerlinks ändern”

  1. Hi Jonathan,

    genau an dem Problem scjeiter ich gerade, deine Erklärung klingt nach der prefekten Lösung. Aber was ich nicht hinkriege: Wie kann ich einem Link denn eine Klasse zuweisen?

    Viele Grüße Volker

  2. ich habe es jetzt mit;
    :target:before {
    content: „“;
    display: block;
    height: 80px; /* same as your fixed header height */
    margin: -80px 0 0; /* negative fixed header height */
    }

    gut hinbekommen

  3. und damit das responsiv auch funzt:

    @media (min-width: 768px)
    {:target:before {
    content: „“;
    display: block;
    height: 100px; /* same as your fixed header height */
    margin: -80px 0 0; /* negative fixed header height */}
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.