Linuchs: Lösung (verbessert)

Beitrag lesen

Hallo Jürgen,

danke für den verlinkten Tipp mit timeout. Bei jedem gefeuerten Scroll-Event verschiebe ich das Setzen/Zurücknehmen der Markierung um 1 sec. Kann man kürzer machen, ich wollte den Effekt deutlich sehen.

So sieht jetzt meine Lösung aus:

window.addEventListener('DOMContentLoaded', function ( ) {
  var h1          = document.getElementsByTagName( "h1" )[0];
  var toggleTime  = null;
  function toggle_h1() {
    console.log( "[" +window.scrollY +"] [" +h1.offsetTop +"]" ); // Test wg. Timeout
    if ( window.scrollY == h1.offsetTop ) {
      h1.classList.add( "pos_markiert" );     // Farbe setzen
    } else {
      h1.classList.remove( "pos_markiert" );  // Farbe entfernen
    }
  }
  document.addEventListener('scroll', function() {
    toggleTime  = setTimeout( toggle_h1, 1000 );
  });
});

Linuchs