Affect other elements based on target element

Referencing the index of the intersected entry in the callback function does not work, or at least it didn’t work for me over the several days I tried. What I mean by that is:

let observer = new IntersectionObserver(
  (entries) =>
    entries.forEach((entry, index) => {
      console.log(index)
      // Continue rest of code...

The trick is to instead set an id attribute to each observed element with a value that matches that of a data attribute (such as data-ref in my below example). For example, the below box with the letter ‘B’ (id="b"), when scrolled to, should show an image of a labrador (data-ref="b").

See the Pen Intersection Observer Simple Example by Danny White (@dw) on CodePen.

Source