我在导航栏中有一个嵌套列表的列表，其中有一个div，它根据滚动位置在导航栏中移动，类似如下。我使用React with Tailwind and Framer Motion来动画显示所有内容后面的div位置。类似如下：

<header className="fixed top-8 left-0 right-0 z-10 my-0 mx-auto block w-full max-w-5xl px-4">
        <nav className="m-auto flex h-14 w-full max-w-3xl items-center rounded-full bg-glass shadow-md backdrop-blur-xl">
          <ul className="relative m-0 flex h-full w-full items-center justify-between gap-12 p-3">
            <li
              role="menuitem"
              onClick={() => handleScrollIntoView(heroSection)}
              onKeyUp={() => handleScrollIntoView(heroSection)}
              className="z-20 shrink-0 pl-3 text-2xl font-medium text-babyPowder hover:cursor-pointer"
            >
              name
            </li>
            <li className="w-full shrink">
              <ul className="relative flex h-full w-auto items-center gap-8 p-3 text-2xl font-normal text-babyPowder70">
                <li
                  role="menuitem"
                  onClick={() => handleScrollIntoView(whoSection)}
                  onKeyUp={() => handleScrollIntoView(whoSection)}
                  className="z-20 shrink-0 transition-colors after:text-babyPowder after:bg-blend-difference hover:cursor-pointer hover:text-babyPowder"
                >
                  who
                </li>
                <li
                  role="menuitem"
                  onClick={() => handleScrollIntoView(whatSection)}
                  onKeyUp={() => handleScrollIntoView(whatSection)}
                  className="z-20 shrink-0 transition-colors hover:cursor-pointer hover:text-babyPowder"
                >
                  what
                </li>
                <li
                  role="menuitem"
                  onClick={() => handleScrollIntoView(howSection)}
                  onKeyUp={() => handleScrollIntoView(howSection)}
                  className="z-20 shrink-0 transition-colors hover:cursor-pointer hover:text-babyPowder"
                >
                  how
                </li>
                <li
                  role="menuitem"
                  onClick={() => handleScrollIntoView(whySection)}
                  onKeyUp={() => handleScrollIntoView(whySection)}
                  className="z-20 shrink-0 transition-colors hover:cursor-pointer hover:text-babyPowder"
                >
                  why
                </li>
              </ul>
            </li>
            <li className="shrink-0">
              <ul className="mr-0 ml-auto flex gap-2 ">
                <a
                  target="_blank"
                  href="mailto:example@example.com"
                  className="srhink-0 rounded-full bg-blueCrayola py-1 px-6 text-center text-2xl font-medium text-babyPowder hover:cursor-pointer hover:opacity-80"
                  rel="noreferrer"
                >
                  talk
                </a>
              </ul>
            </li>
          </ul>
          <motion.div
            style={{
              height: 'calc(100% - 1.1rem)',
              width: springWidth, // framer motion value
              left: springLeft, // framer motion value
            }}
            className="absolute rounded-full bg-eerieBlack"
          />
        </nav>
      </header>

代码沙盒：https://codesandbox.io/s/change-color-based-on-if-div-is-behind-text-jk35r6
如果我在文本上使用mix-blend-mode CSS属性，我可以达到下图所示的效果。但是，我试图使div位于文本前面或后面时，文本变为白色。而当div不在文本前面或后面时，文本保持灰色。换句话说，与图中所示的相反。
任何帮助都是感激不尽的。谢谢！

PS：我找遍了Stack Overflow、CSS Tricks和其他资源，但是没有找到一个例子能达到我在这里尝试的效果。我在CSS Tricks上找到了this article，它很接近，但是这里的文本元素必须是div的子元素，在我的例子中，这是行不通的。如果有一个问题能回答这个问题，我很抱歉。