Как добавить класс элементу когда другой скрылся вверху?

Question

[Dmax99]

Здравствуйте! Есть рабочий вариант скрипта, но он работает наоборот.
Он меняет классы когда элемент появляется внизу.
Мне же нужно менять классы только когда элемент с id или class пропадает с зоны видимости именно вверху. А не внизу как сейчас. Чтобы подправить самостоятельно, знаний уже не хватает...

Вот сам скрипт

$(window).scroll(function(){
  var top = $('#button').offset().top,
      sctop = $(this).scrollTop(),
      winh = $(this).height(),
      y = top - sctop - winh;
  if (y < 0 || -y > winh) {
    document.querySelector('#panel').classList.remove("d-hide");
	document.querySelector('#panel').classList.add("d-show");
  }
  else {
	document.querySelector('#panel').classList.remove("d-show");
	document.querySelector('#panel').classList.add("d-hide");
  }
});

Answer 1

[Чипекве]

const panel = document.querySelector("#panel");
const button = document.querySelector("#button");

const buttonObserverCallback = (entries) => {
  entries.forEach(entry => {
    const isButtonAbove = entry.boundingClientRect.bottom < 0;
    panel.classList.toggle("d-hide", isButtonAbove);
  });
};

const intersectionObserver = new IntersectionObserver(buttonObserverCallback, {  threshold: 0 });
intersectionObserver.observe(button);

Comments

[Dmax99]

Большое спасибо ;)