Div Element flimmert beim scrollen

Question

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?

Answer 1

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');
        }
    });
});