Как убирать элемент, когда он пересекает другой блок?
const el = document.querySelector('.element');
const wrapper = document.querySelector('.wrapper');


window.addEventListener('scroll', () => {
  const wrapperBox = wrapper.getBoundingClientRect();
  const elBox = el.getBoundingClientRect();

  const isInside = elBox.top > wrapperBox.top && elBox.bottom < wrapperBox.bottom;

  el.style.opacity = isInside ? 1 : 0;
});
И к стилям .elementtransition: opacity 0.3s;
opacity: 0;
Фига ты выдал)) тут обычно помогают разобраться с твоим кодом если что-то не получается, а с нуля тет редко что-то пишут) По факту берешь scroll событий и получаешь координаты своего серого блок, потом получаешь координаты круга и как только они пересеклись делаешь появление как только они разошлись скрывать.