Linuchs: Lösung

Beitrag lesen

Ich muss nach einem Scrollvorgang feststellen, ob h1 am oberen Rand des Fensters klebt. Habe ein knappes dutzend Webseiten mit Geschwurbel und Diskussionen durchgesehen, aber keine Lösung gefunden.

Überlegung:

Wenn ich sticky mit top:0 definiere und der Abstand window.scrollY genauso groß ist wie h1.offsetTop klebt h1 am oberen Rand:

var h1  = document.getElementsByTagName( "h1" )[0];
document.addEventListener('scroll', function() {
  if ( window.scrollY == h1.offsetTop ) {
    h1.classList.add( "pos_markiert" );     // Markierung setzen
  } else {
    h1.classList.remove( "pos_markiert" );  // Markierung entfernen
  }
});

funktioniert bestens.

Allerdings feuert das scroll-Event mehrmals pro Scrollvorgang, wie könnte ich das noch optimieren?

Linuchs