问基于背景颜色滚动时更改SVG填充

EN

const svg = document.querySelector('svg');
let callback = (entries, observer) => {
  entries.forEach(entry => {
  //List from MDN:
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
    //eventually make the gradient chosen depend on the % overlap and the color of the previous sibling element
    if (entry.isIntersecting) {
      svg.style.fill = (entry.target.classList.contains('dark')) ? 'url(#white)' : 'url(#black)';
    }
    else {
      svg.style.fill = (entry.target.previousElementSibling.classList.contains('dark')) ? 'url(#white)' : 'url(#black)';
    }
  });
};
let options = {
  threshold: [ 0.9, 0.94, 0.98 ] // need to work on these thresholds
}

let observer = new IntersectionObserver(callback, options);
const stickies = document.querySelectorAll('main div.sticky');
stickies.forEach( sticky => {
  observer.observe(sticky);
});

html {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.nav {
  position: fixed;
  width: 100;
  top: 0;
  left: 0;
  right: 0;
  rpadding: 24px 28px;
  padding: 2vh 28px;
  rpadding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 999;
}

svg {
  fill: black;
}

.sticky {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: sticky;
  top: -1px;
  background-color: white;
}

.dark {
  background-color: #1e1e1e;
  color: #fff;
}

<div class="nav">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve">
  <defs>
    <linearGradient id="black" x1="0%" y1="0%" x2="100%" y2="0%"  gradientTransform="rotate(90)">
      <stop offset="0%"   stop-color="#000"/>
      <stop offset="100%" stop-color="#000"/>
    </linearGradient>
    <linearGradient id="white" x1="0%" y1="0%" x2="100%" y2="0%"  gradientTransform="rotate(90)">
      <stop offset="0%"   stop-color="#fff"/>
      <stop offset="100%" stop-color="#fff"/>
    </linearGradient>
  </defs>
    <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
    </svg>
</div>
<main>
  <div class="sticky">Section 1 Light</div>
  <div class="sticky dark">Section 2 Dark</div>
  <div class="sticky">Section 3 Light</div>
  <div class="sticky">Section 4 Light</div>
  <div class="sticky">Section 5 Light</div>
  <div class="sticky dark">Section 6 Dark</div>
</main>