Смена цвета у ряда элементов при скроле

Каждый из svg в фиксированном меню, расположенный вертикально на странице, должен менять цвет при скроле, когда нижняя часть секции "" его достигает". Данный выше код jq хорошо меняет цвет у кнопки, но нужно, чтобы также каждый в отдельности svg менял цвет при достижении конца секции при скроле. Нужно как-то через цикл сделать, но пока не получается.

```$(document).on("ready", function () {
  $(window).on("scroll", function () {
    let winScrollTop = $(this).scrollTop();
    function colorChange() { 
      let iconSvg = $(".icon-svg");
      let heightBox = $("._p-project");
      let button = $(".navbar-toggler");
      let target = $("._p-sec-contact");
      let targetPos1 = button.offset().top;
      let targetPos2 = target.offset().top;
      let winHeight = $(window).height();
      let winScrollBottom = $(this).scrollTop() - winHeight + 55;
      let scrollToElem = targetPos1 - winHeight;
      let scrollToElem1 = targetPos2 - winHeight;
      if (winScrollTop > scrollToElem && winScrollBottom > scrollToElem1 || winScrollTop < heightBox.height()) {
        $(button).removeClass("_p-navbar-toggler");
        $(iconSvg).attr("class", "icon-svg i-color-white");
      } else {
        $(button).addClass("_p-navbar-toggler");
        $(iconSvg).attr("class", "icon-svg");
      }
    }
    colorChange();
  });
});```
Код html "Каждый из svg в фиксированном меню, расположенный вертикально на странице, должен менять цвет при скроле, когда нижняя часть секции "<section class="sec-home _p-project">" его достигает". Данный выше код jq хорошо меняет цвет у кнопки, но нужно, чтобы также каждый в отдельности svg менял цвет при достижении конца секции при скроле. Нужно как-то через цикл сделать, но пока не получается.
```<div class="menu-fixed">
      <button class="navbar-toggler t-navbar-toggler _p-navbar-button">
        <span></span>
      </button>
      <div class="block-sprite d-flex flex-dr-col">
        <svg class="icon-svg i-color-white">
          <use xlink:href="img/sprite.svg#Vector"></use>
        </svg>
        <svg class="icon-svg i-color-white">
          <use xlink:href="img/sprite.svg#instagram"></use>
        </svg>
        <svg class="icon-svg i-color-white">
          <use xlink:href="img/sprite.svg#Vector-1"></use>
        </svg>
        <svg class="icon-svg i-color-white">
          <use xlink:href="img/sprite.svg#Vector-3"></use>
        </svg>
        <svg class="icon-svg i-color-white">
          <use xlink:href="img/sprite.svg#Vector-4"></use>
        </svg>
      </div>
    </div>

    <section class="sec-home _p-project">
      <div class="container-body _p-container-body">
        <h1 class="title-home">  </h1>
        <h3 class="subtitle-home">        
        </h3>
      </div>
    </section>```