【gsap】ページ内スクロールのナビゲーションにカレントを付与する

navの設定

      <div class={`${css.nav_block} sticky_block`}>
        <ul class={`${css.nav} nav`}>
          <li>
            <a href="#section1" id="navitem1"> 01- xxxx </a>
          </li>
          <li>
            <a href="#section2" id="navitem2"> 02- xxxx </a>
          </li>
          <li>
            <a href="#section3" id="navitem3"> 03- xxxx </a>
          </li>
          <li>
            <a href="#section4" id="navitem4"> 04- xxxx </a>
          </li>
          <li>
            <a href="#section5" id="navitem5"> 05- xxxx </a>
          </li>
        </ul>
      </div>

DOMのIDの設定

<div class={css.inner} id="section1">
  ...
</div>
<div class={css.inner} id="section2">
  ...
</div>
<div class={css.inner} id="section3">
  ...
</div>
<div class={css.inner} id="section4">
  ...
</div>

navのgsapでsticky（pin）させる

    ScrollTrigger.create({
      trigger: '.sticky_block',
      pin: true,
      start: 'top top',
      endTrigger: '.series', //好きな要素で終わらせる。
      end: 'top bottom-=300',
    });

gsapの設定

    for (let i = 1; i <= 5; i++) {
      const navSelector = `#navitem${i}`;
      const sectionSelector = `#section${i}`;

      ScrollTrigger.create({
        trigger: sectionSelector,
        start: 'top center',
        end: 'bottom center',
        toggleClass: {
          targets: navSelector,
          className: 'active',
        },
        //markers: true,
      });
    }