Same intersection observer for multiple HTML elements

Question

I am trying to make it so that as some text items stop overlapping a dark background, they will individually change color one by one as the user scrolls. All of the text items are position: fixed

EDIT: The MDN docs say (emphasis mine):

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element

I think this means there is no way to solve my problem because the elements I want to monitor for overlap are not children of the root I am specifying in the options object.

Is there any way to detect overlap if the overlapping element is not a child of the other element?

if ('IntersectionObserver' in window) {

    const options = {
        root: document.getElementById('flow-landing'),
        rootMargin: '0px',
        threshold: 0
      }


    var callback = function(entries, observer) { 
            entries.forEach(entry => {

                if (entry.isIntersecting) {
                    entry.target.style.color = "white";
                }
                else {
                    entry.target.style.color = null;
                }
            });
          };

    const observer = new IntersectionObserver(callback, options);

    var targets = [Array.from(document.querySelectorAll('.social-item')), Array.from(document.querySelectorAll('.additional-item'))].flat();

    targets.forEach(target => 
        observer.observe(target));
}

There aren't any console errors but the code isn't doing anything.

Answer 1

Modifying Ruslan's answer a little because in his answer, multiple Intersection Observer objects are being created.

It is possible to observe multiple elements using the same observer by calling .observe() on multiple elements.

let observerOptions = {
    rootMargin: '0px',
    threshold: 0.5
}

var observer = new IntersectionObserver(observerCallback, observerOptions);

function observerCallback(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
          //do something
        }
    });
};

let target = '.targetSelector';
document.querySelectorAll(target).forEach((i) => {
    if (i) {
        observer.observe(i);
    }
});