dwa warunki wykonują się jednocześne

Hej, mam problem taki, ze podczas scrollowania występują momenty, ze trafiam na punkt gdzie dwa warunki wykonują się jednocześnie i występuje na przemian dodanie/usuniecie klasy przez co jest dziwny efekt na stronce (element div miga) ;p Może mi ktoś pomoc rozwiązac ten problem?

const lorem = document.querySelector('.lorem');

const attribute1 = '200';
const attribute2 = '100';

let prevPosY = window.scrollY;
let prevAnimationAPosY = window.scrollY;

window.addEventListener('scroll' , function () {
  const currentPosition = prevPosY >= window.scrollY ? 'top' : 'bottom';

  if (currentPosition === 'bottom' && prevPosY > Number(attribute1)) {
     // dodanie klasy css
    prevAnimationAPosY = window.scrollY;
  } else if(currentPosition === 'top' && prevPosY < (prevAnimationAPosY - Number(attribute2))) {
     // usuniecie klasy css
  }

  prevPosY = window.scrollY;
}, { passive: true });

Wiem o co Ci chodzi, ale nie mogę odwzorować błędu :(

Jeśli animowany element ma cały czas position: fixed i nigdy tego nie zmieniasz, tak jak w przykładzie na codepen to taki element nie wpływa na pozycję scrollbara i można z nim robić cokolwiek.

Problem byłby jakby jedna klasa ustawiała position: fixed, a druga to zmieniała na inną wartość sticky, relative, absolute, static itd.

Można spróbować przy obliczaniu pozycji dodać lekki margines błędu jakby scrollbar się przesunął, np -10px/+10px, musiałbyś posprawdzać, jaka wartość to naprawia

const currentPosition = prevPosY >= window.scrollY - 10 ? 'top' : 'bottom';