메뉴 클릭 시 해당 부분으로 이동하기 , 프로젝트 섹션 부분이 navbar 위로 올라오는 에러 발생

• 메뉴가 클릭되면 값을 가져와서 addEventListener에 등록한 함수를 실행시킨다.
• 들어온 event 객체의 target에 접근해서 해당 이벤트가 일어난 요소를 가져온다.

menu에서 해당 페이지부분으로 스크롤 하기

1. 메뉴의 요소를 가지고 와서 클릭 이벤트가 일어났을 때의 동작을 처리하기 위해 먼저 그 요소를 가져올 것이다.

const navMenu = document.querySelector('.nav__menu');

let handleMoveMenu = (e) => {
  console.log(e.target);
}
navMenu.addEventListener('click', handleMoveMenu);

그러면 클릭한 해당 태그들의 값이 잘 찍히는 것을 먼저 확인했다.

---

이제 해당 메뉴를 클릭하면 해당 section으로 이동하게 section의 id를 찍어 볼 것이다!

scroll event 처리 1

스크롤 이벤트를 걸 때 해당 li태그의 class중 nav__menu__item이라는 클래스가 있으면
data-~~ 라는 속성을 이용해서 해당 값이 있을 때, dataset에 있는 값들 중 해당 값에 scrollIntoView 이벤트를 적용시켜서 해당 부분으로 이동하도록 처리를 했다.

/* class생략 */
<ul class="nav__menu">
  <li data-link="#home">Home</li>
...
</ul>

let handleMoveMenu = (e) => {
  const menuLi = e.target;
  console.log(menuLi);

  if (menuLi.classList.contains('nav__menu__item')) { //menuLi.nodeName === 'LI'
    let menuPosition = menuLi.dataset.link;
    let target = document.querySelector(`${menuPosition}`);
    console.log(target);
    target.scrollIntoView({ 'behavior': 'smooth' });
  }
}

navMenu.addEventListener('click', handleMoveMenu);

위의 코드를 실행하면, 해당 메뉴 클릭 시 원하는 부분으로 스크롤 이벤트가 잘 적용되었다.

---

project section부분에서 에러 발생!

프로젝트들이 nav위로 올라가는 문제가 발생했다🤣

---

위의 에러를 어떻게 하면 해결 할 수 있을까?!

위의 문제에서 잘 살펴봐야 될 것이 있다.
바로 메뉴! 이 부분은 스크롤이 일어나도 화면의 맨 위에 계속 고정된 상태로 보여야 되니까 해당 부분에 z-index: 1;을 줘서 간단하게 문제를 해결했다!

#nav {
 ...생략
  z-index: 1;
}

따란! 우선 문제를 잘 해결했다!