Javascript für CSS position:sticky

CSS position sticky beim Scrollen

CSS position: sticky ist ein Sonderfall von position: fixed. Ein Block wandert nach oben, wenn der Benutzer die Seite nach unten scrollt, aber wird fixiert, wenn er eine bestimmte Position erreicht. Javascript greift ein, wenn der Browser position sticky nicht unterstützt und fixiert den Block, wenn der Benutzer nach unten scrollt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

fixed und sticky

In CSS gibt es die Eigenschaften position: fixed und position: sticky. position: fixed setzt einen Block von vornherein auf einer bestimmten Position fest, so dass er nicht mitscrollt, wenn der Benutzer durch die Seite scrollt. position:sticky funktioniert ähnlich, aber der Block scrollt zunächst mit und wird erst ab einer bestimmten Position im Browserfenster fixiert.

CSS position:fixed wird von allen aktuellen Browsern unterstützt, position:sticky hingegen nicht von IE11. Microsoft Edge unterstützt CSS sticky seit Version 17. Die könnten wir nun einfach laufen lassen – oder greifen auf Javascript zurück.

Javascript für CSS position: sticky

Sticky Navigation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet est vitae elit sollicitudin bibendum fringilla at dui. Aliquam tempus pretium tempor. Quisque diam massa, gravida ut sem non, laoreet venenatis lorem. Proin vel posuere justo, ut fermentum eros. Proin id ultricies mi. Nulla facilisis venenatis nisi at laoreet. Suspendisse potenti. In justo elit, ultricies sit amet facilisis a, consectetur ut sem.

CSS für sticky
@media (min-width: 680px) {
   .jsSticky {
      width: 100%;
      height: 60px;
      background: firebrick;
      position: relative;
   }
   
   .sticky {
      position: fixed;
      top: 0;
      width: 100%;
   }
}

@supports (position: sticky) or (position: -webkit-sticky) {
   @media (min-width: 680px) {
      .jsSticky {
         position: -webkit-sticky;
         position: sticky;
         top: 0;
         background: plum;
      }
   }
}

Javascript sticky ahmt das Verhalten von CSS sticky durch die Animation von position: fixed nach.

Javascript für position: sticky
// Erst prüfen, ob position: sticky nicht sowieso schon unterstützt wird 
let header = document.getElementById("myHeader");
let positionSticky = window.getComputedStyle(header).getPropertyValue("position");

if (positionSticky != "sticky" ) {
   window.onscroll = function() {myFunction()};

   // Wie weit entfernt vom oberen Rand ist der Header?
   let sticky = header.offsetTop;

   // Wenn die scroll-Position erreicht ist, die CSS Klasse sticky hinzufügen und sonst wieder entfernen
   function myFunction() {
      if (window.pageYOffset >= sticky) {
         header.classList.add("sticky");
      } else {
         header.classList.remove("sticky");
      }
   }
}

window.getComputedStyle (header) gibt die CSS-Stile eines Elements zurück, die sich aus der CSS-Datei, einem style-Element der Seite und Änderungen berechnen.

getComputedStyle ist keine Methode des Dokuments, sondern von window.

position sticky für moderne Browser

Das sind nur wenige Zeilen Vanilla Javascript, aber ein Event Listener auf dem scroll-Event ist eine schwere Last, die man Browsern, die position:sticky von Haus aus unterstützen, nicht auferlegen sollte. Scrollen gehört zu den den meistgenutzten Aktionen.

Eine Abfrage, ob der Browser position sticky von Haus aus unterstützt, ist dank der CSS @supports-Regel einfach.

Nach dem CSS für den sticky-Fake kommt das CSS für die Browser, die sticky unterstützen.

@supports (position: sticky) {
   @media (min-width: 680px) {
      .jsSticky {
         position: sticky;
         top: 0;
      }
   }
}

window.getComputedStyle klärt, ob sticky unterstützt wird.

let header = document.querySelector(".jsSticky");
let positionSticky = window.getComputedStyle(header).getPropertyValue("position");
if (positionSticky === "relative" ) {
   
   // stickyfy

}

In der @supports-Regel steckt noch eine weitere Bedingung: Auf Geräten mit einem kleinen Viewport soll der sichtbare Bereich der Seite nicht verkleinert werden.