Zur Performance bei Scroll-Event

[Camping_RIDER]

Aloha ;)

Mit deinem Inspector (z.B. in Chrome - Rechtsklick - Untersuchen). Damit kannst du beobachten, was denn eigentlich beim Scrollen passiert. Du wirst dann feststellen, dass beim Scrollen (und das funktioniert tatsächlich über einen Javascript-Event-Handler ähnlich zu TS Vorschlag mit den von mir genannten gravierenden Nachteilen) dem Body eine Klasse fixed-header-on hinzugefügt (und bei wieder-hochscrollen entsprechend entfernt. Mit nativem JavaScript funktioniert das so (im Original wird ein JS-Framework verwendet):

function checkScroll() {   
  if(window.pageYOffset > 0 && !document.body.classList.contains("fixed-header-on")) {
    document.body.classList.add("fixed-header-on");                 
  } else if (window.pageYOffset == 0 && document.body.classList.contains("fixed-header-on")) {
    document.body.classList.remove("fixed-header-on");
  }
}

window.addEventListener("scroll",checkScroll);
window.addEventListener("load",checkScroll); // Falls mit Anker gesprungen wurde!

Eventuell ist das Verwenden des Scroll-Event hier ausnahmsweise einigermaßen gerechtfertigt. Josh Broton schlägt in seinem Artikel vor, eine Intervall-Lösung zu nutzen, die nur in gewissen Zeitabständen wirklich tätig wird. Unterm Strich muss aber auch bei seiner Lösung dadurch jedesmal mindestens ein if durchlaufen werden. Das unterscheidet sich nicht sehr vom Aufwand der hier vorliegenden Lösung (ohne Intervall) je Scroll-Auslöser. Vielleicht lässt sich die Performance sogar noch verbessern, indem der meist-vorkommende Fall (es wird gescrollt und es war davor auch schon gescrollt) bevorzugt abgefangen wird:

function checkScroll() {
  if(window.pageYOffset > 0) {
    if (document.body.classList.contains("fixed-header-on")) {
      return true;
    } else {
      document.body.classList.add("fixed-header-on");
    }
  } else if (document.body.classList.contains("fixed-header-on")) {
    document.body.classList.remove("fixed-header-on");
  }
}

window.addEventListener("scroll",checkScroll);
window.addEventListener("load",checkScroll); // Falls mit Anker gesprungen wurde!

Eine weitere kleine Performance-Verbesserung kann man vielleicht erreichen, indem man eine fixe Boolean-Variable window.hasScrolled verwendet statt des classList.contains-Aufruf, aber ich denke das ist performancetechnisch verschmerzbar.

Unter diesem Umstand kann man den Code hier vielleicht so verwenden, ohne große Performance-Bauchschmerzen zu bekommen.

Grüße,

RIDER