Javascript für CSS position sticky

Javascript – 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 und wird erst 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.

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 und Microsoft Edge. Die könnten wir nun einfach laufen lassen – oder wir 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 
var header = document.getElementById("myHeader");
var positionSticky = window.getComputedStyle(header).getPropertyValue("position");

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

   // Wie weit entfernt vom oberen Rand ist der Header?
   var 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");
      }
   }
}

position sticky für moderne Browser

Das sind nur wenige Zeile 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) or (position: -webkit-sticky) {
   @media (min-width: 680px) {
      .jsSticky {
         position: -webkit-sticky;
         position: sticky;
         top: 0;
      }
   }
}

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

var header = document.querySelector(".jsSticky");
var 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.