CSS, HTML und Javascript mit {stil}

Javascript statt CSS position sticky

JS stickyfy – CSS position: sticky mit Javascript

CSS position: sticky ist ein Sonderfall von position: fixed. Ein Block wandert nach oben, wenn der Benutzer die Seite nach unten scrollt, aber bleibt fest stehen, wenn er eine bestimmte Position erreicht.

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 nur von den Webkit-Browsern und Firefox. Chrome und Internet Explorer bleiben (vorerst?) ohne Support für position:sticky.

Javascript sticky statt 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
.jsSticky {
  position: relative;
  width: 100%;
  height: 40px;
  background: hsl(350,50%,50%);
}

.jsSticky.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform ease-in;
}

body.down .jsSticky.clone {
  transform: translateY(0);
}

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

stickystart legt stellt fest, wie weit der Benutzer scrollen kann, bevor der Block fixiert wird. In diesem Beispiel wird der Block oben im Browserfenster fixiert und die Scrolldistanz ist der Abstand des Sticky-Blocks vom oberen Browserrand.

Javascript für position: sticky
var stickystart = document.querySelector(".jsSticky").offsetTop;
var sticky = document.getElementsByClassName("jsSticky")[0];
var sticky = {
  sticky_after: stickystart,
  init: function() {
    this.header = document.querySelector(".jsSticky");
    this.before = document.querySelector(".jsSticky").previousElementSibling.nextChild;
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone, this.before);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

CSS platziert Elemente mit zwei Techniken:

  • Mit den altgedienten Eigenschaften position: absolute, relative und fixed können wir top, right, bottom und left animieren.
  • CSS animiert Elemente mit den Eigenschaften display: block und display: inline-block über transform: translate(), translateX() und translateY().

I.d.R. ziehen wir heute Animationen über transform: translate() vor.