인터섹션 옵저버로 영역감지시 class붙게

<nav class="main_nav">
			<ul>
				<li id="0"><a href="#1">HOME</a></li>
				<li id="1"><a href="#2">PROFILE</a></li>
				<li id="2"><a href="#3">PORTFOLIO</a></li>
				<li id="3"><a>DESIGN</a></li>
				<li id="4"><a>CONTACTS</a></li>
			</ul>
		</nav>
	</header>
	<aside class="aside_menu">
		<ul>
			<li id="0"><a >HOME</a><div></div></li>
			<li id="1"><a>PROFILE</a><div></div></li>
			<li id="2"><a>PORTFOLIO</a><div></div></li>
			<li id="3"><a>DESIGN</a><div></div></li>
			<li  id="4"><a>CONTACTS</a><div></div></li>
		</ul>
	</aside>
    <section id ="0" class="box" style="background-color:rgb(192, 113, 113);"><p>1</p></section>
    <section id ="1" class="box" style="background-color:rgb(167, 143, 98);">
		모양
	</section>
    <section id ="2"  class="box" style="background-color:rgb(167, 167, 106);"><p>32222</p></section>
    <section id ="3" class="box" style="background-color:rgb(85, 129, 85);"><p>4</p></section>
    <section id ="4" class="box" style="background-color:rgb(83, 83, 136);"><p>5</p></section>

아이디 값을 줬음

/*성공했다 이유는ㅁㄹ https://merrily-code.tistory.com/228참고*/ 
const $cards = document.querySelectorAll('.section')

const observer = new IntersectionObserver(entries => {
  // 2. 감지한 모든 .card 요소의 정보를 entries 배열로 전달받습니다.
  // 3. entries 배열을 순회해, isIntersecting 조건이 참일 경우 "on" 이라는 클래스명을 추가합니다.
  entries.forEach(entry => {
	if(entry.isIntersecting){
		mainnav[entry.target.id].classList.add('on');
		asideli[entry.target.id].classList.add('on');
	}else {
		mainnav[entry.target.id].classList.remove('on');
		asideli[entry.target.id].classList.remove('on');
	}
	
  })
}, { threshold: 0.5 })

section.forEach(card => {
    // 1. 모든 .card 요소의 인터섹션을 감지합니다.
  observer.observe(card)
});