スクロールするたびにナビゲーションボタンを選択

navbarのメニューボタンと各部分を接続する必要があります.
スクロール中は、画面に入る部分に対応するメニューボタンを選択します.

パーティションid配列の作成

HTML : section

以下に示すように、各部分にidが指定されています.

 <section class="skills" id="skills">

section id array

指定されたパーティションIDを含むパーティションID配列を作成します.

const sectionIds = [
  '#profile',
  '#about-me',
  '#skills',
  '#my-work',
  '#contact',
]

HTML : navBar

データセットとして、navbaのメニューボタンごとにsection idと同じデータリンクが指定されます.

    <div class="menu menu-spread">
      <span class="menu--home menu-selected" data-link="#profile">home</span>
      <span class="menu--about" data-link="#about-me">about</span>
      <span class="menu--skills" data-link="#skills">skills</span>
      <span class="menu--my-work" data-link="#my-work">my work</span>
      <span class="menu--contact" data-link="#contact">contact</span>
    </div>

querySelector

const sections = sectionIds.map(id => document.querySelector(id));
const navItems = sectionIds.map(id =>
  document.querySelector(`[data-li nk="${id}"]`)
);

intersectionObvserver

let options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.3,
}

let observer = new IntersectionObserver(callback, options);
sections.forEach(section => observer.observe(section));

各部分にクロスオブザーバーが付いています.

intersectionObserver - callback function

最初の部分と最後の部分が問題です.
第1のセクションは、第1のページのロード時に画面に含まれているため、交差はゼロです.
最後の部分は...
したがって、1つのセクションを通過するたびに、変数に指定されたインデックス+1が与えられ、各インデックスにメニューボタンが選択可能であることを確認します.

let callback = (entries, observer) => {
  entries.forEach(entry => {
    if(!entry.isIntersecting && entry.intersectionRatio > 0){
      const index = sectionIds.indexOf(`#${entry.target.id}`);
      if (entry.boundingClientRect.y < 0) {
        selectedNavIndex = index + 1;
      } else {
        selectedNavIndex = index - 1;
      }
    }
  });
};

この場合、最初のセクションと最後のセクションはカウントされません.
indexの初期値を指定します.
index値は最初は0から始まるので、グローバル変数0として指定します.let selectedNavIndex = 0;

index of first & last section

window.addEventListener('wheel', () => {
  selectNavItem(navItems[selectedNavIndex]);//다음 부분 참고
  if(window.scrollY === 0) {
    selectedNavIndex = 0;
  } else if (window.scrollY + window.innerHeight
      === document.body.clientHeight) {
    selectedNavIndex = navItems.length - 1;
  }
})

window.scrollyが0の場合、すなわち第1部の場合、インデックスの値は0に指定されます.
最後の部分はnavItemslength-1は、セクション全体の最後の値として指定されます.

classList.add & remove()

let selectedNavItem = navItems[0];

function selectNavItem(selected) {
  selectedNavItem.classList.remove('menu-selected');
  selectedNavItem = selected;
  selectedNavItem.classList.add('menu-selected');
}