lima-city: Webhosting, Domains und Cloud
1 Pluspunkt 0 Minuspunkte

Ich habe ein DIV

.test{
    ...
}
.test.fixed {
    position: fixed;
    top: 0;
}

das ich mit einem IntersectionObserver überwache und die CSS Klasse zum DIV hinzufüge.

const ob = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          document.querySelector('.scrolldiv').classList.remove('fixed');
        } else {
          document.querySelector('.scrolldiv').classList.add('fixed');
        }
      }
    }
);
ob.observe(document.querySelector('.scrolldiv'));

Das funktioniert eigentlich auch nur das Problem ist das das DIV extrem flimmert. Wie kann ich das flimmern weg bekommen?

von  

1 Antwort

1 Pluspunkt 0 Minuspunkte

Die IntersectionObserver Klasse ist sehr resourcenaufwändig und eher für Echtzeit Anwendungen gedacht. Du kannst die Funktion auch in Vanilla Javascript implementieren.

document.addEventListener('DOMContentLoaded', function() {
    var scrolldiv = document.querySelector('.scrolldiv');
    var dis = scrolldiv.offsetTop;
    var $window = window;
    
    $window.addEventListener('scroll', function() {
        if ($window.scrollY >= dis) {
            scrolldiv.classList.add('fixed');
        } else {
            scrolldiv.classList.remove('fixed');
        }
    });
});
von (716 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Beiträge bewerten
  • Inhalte bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft. Unser Ziel: Guter Inhalt. Für alle.

2.3k Fragen

2.8k Antworten

260 Kommentare

12 Nutzer