Lowterm: Css-Menü

Hallo,

ich suche einen Menüeffekt, wie auf dieser Seite rechts platziert ist :

https://developers.google.com/web/updates/2017/11/overscroll-behavior

Man sieht beim Scrollen, wo man sich gerade auf der Seite befindet und kann man auch zu einem bestimmten Punkt springen. Wie heißt dieser Effekt und wo kann man ein gutes Beispiel dazu finden?

Gruß

  1. Hallo,

    Menüeffekt, wie auf dieser Seite

    Auf der Seite werden mehrere Varianten mit Bezeichnung vorgestellt. Welchen meinst du?

    Wie heißt dieser Effekt?

    Sag mir welchen du meinst und ich sag dir wie er heißt...

    Gruß
    Kalk

    1. Hallo,

      danke, wie bereits erwähnt, das Menü oben rechts, die zur Seite gehört.

      Menü

      Gruß

  2. Hallo Lowterm,

    das Springen zu einem bestimmten Punkt ist einfach. Das sind Überschriften, die haben eine bestimmte ID, und die Elemente auf der rechten Seite sind <a> Elemente mit einer Hash-href.

    <a href="#intro">Introducing something</a>
    ...
    <h2 id="intro">Introducing something</h2>
    

    Ein Klick auf den Link sucht auf der Seite das Element mit der ID intro und positioniert es am oberen Bildschirmrand.

    Das ist nicht so trivial, wie es klingt, vor allem wenn fixed-Elemente ins Spiel kommen. Ggf. muss man nachjustieren, d.h. das Linkziel etwas nach unten verschieben, damit es nicht hinter dem Fixed-Bereich verschwindet. Dafür gibt's seit einiger Zeit eine CSS Eigenschaft: scroll-padding-top. Das haben wir hier diskutiert und hier ist ein Doku-Stub mit Links zu weiteren Infos.

    Die Google-Seite scheint kein Scroll-Padding zu verwenden, und das bedeutet wohl, dass sie die Positionierung mit JavaScript steuern.

    Der andere Aspekt ist das Highlighting des aktiven Abschnitts. Ich vermute, dass sie das mit einem Eventhandler für das scroll-Event machen und die Scrollposition des Containers (sollte eigentlich die scrollTop-Eigenschaft sein) mit den Oberkanten der Überschrift-Elemente (offsetTop) vergleichen. Das sind nicht viele und man kann diese Positionen cachen (was bei einem resize natürlich aktualisiert werden muss), es ist also kein Performance-Grab. Dem <a> Element im Seitenindex, das gerade aktiv ist, wird dann eine Klasse zugewiesen, die die Hervorhebung steuert.

    Mich verwirrt nur gerade ein wenig, dass ich bei allen mutmaßlichen Kandidaten für einen Scrollcontainer keinen finde, bei dem scrollTop > 0 ist. Aber ich habe jetzt auch keine Zeit, deren Seite komplett auseinander zu nehmen.

    Sie verwenden möglicherweise auch einen IntersectionObserver, das ist eine Komponente, mit dem man Events bekommt, wenn ein Element sichtbar wird oder aus der Sichtbarkeit verschwindet. Dazu haben wir noch nichts im Wiki, ich kann erstmal nur auf einen englischen MDN-Artikel verweisen sowie auf einen stilvollen Artikel von Ulrike Häßler.

    Der Weg zu einem Beispiel ist dann nicht mehr so weit 😉

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo Rolf,

      vielen Dank für die Erklärung.

      Gruß