Как убирать элемент, когда он пересекает другой блок?

Question

[fruneen]

Всем привет! Возникла проблема (сразу кидаю JSFiddle), нужен скрипт, при котором синий круг изначально не виден, но при попадании в серый блок круг плавно появляется, также прошу учесть, что при выходе из серого блока (в обе стороны) синий круг должен плавно пропадать. Заранее спасибо!

Желательно реализовать на Jquery

Answer 1

[Vitaliy]

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

И к стилям .element

transition: opacity 0.3s;
opacity: 0;

Answer 2

[Сергей Карвасарный]

Фига ты выдал)) тут обычно помогают разобраться с твоим кодом если что-то не получается, а с нуля тет редко что-то пишут) По факту берешь scroll событий и получаешь координаты своего серого блок, потом получаешь координаты круга и как только они пересеклись делаешь появление как только они разошлись скрывать.

Comments

[fruneen]

Пишу сюда потому что не получилось, есть скрипт, но я думаю правильнее будет написать новый скрипт, так как старый не совсем подходит(

[Сергей Карвасарный]

Можно прям как-то так если не заморачиваться совсем)) 260 и 40 можно тоже сделать переменными, 260 это типа высота блока твоего offsetHeight - 20 высота кружка и еще 20 это отступ у тебя top: 20px, в сумме 40)
fruneen,

const element = document.querySelector('.element');
element.style.display = 'none';
const wrapper = document.querySelector('.wrapper');

window.addEventListener('scroll', function(){
if (this.pageYOffset >= wrapper.offsetTop - 40){
	element.style.display = 'block';
} else {
element.style.display = 'none';
}
if(this.pageYOffset >= wrapper.offsetTop + 260) {
	element.style.display = 'none';
}
});