Javascript für CSS position:sticky

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

@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.

// 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.