如何在视口传递#id [Javascript] 时更改图像源

Question

如何在视口传递#id 时更改图像源，Javascript？

下面的link是我想做的事情的图片。

The image

我不知道如何将 scrollEvent 绑定到 div。好久没写了 Javascript...

非常感谢 ;)

Answer 1

observer = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.intersectionRatio > 0) {
      document.querySelector(`div[data-id=${e.target.id}]`).classList.add('active');
    } else {
      document.querySelector(`div[data-id=${e.target.id}]`).classList.remove('active');
    }
  })
})
document.querySelectorAll('div[id]').forEach((e) => {
  observer.observe(e);
})

div[id] {
  height: 400px;
  background-color: #ededed;
  border: 1px solid white;
}

.menu {
  position: fixed;
  right: 10px;
  top: 10px;
}

.menu div {
  height: 40px;
  width: 40px;
  margin: 10px;
  background-color: white;
}

.active {
  background-color: #54DF6E !important;
}

<div id="id-1">

</div>
<div id="id-2">

</div>
<div id="id-3">

</div>
<div class="menu">
  <div data-id="id-1"></div>
  <div data-id="id-2"></div>
  <div data-id="id-3"></div>
</div>

如何在视口传递#id [Javascript] 时更改图像源

How to change an image source when the viewport pass an #id [Javascript]

html

javascript

css

viewport