메뉴 클릭 시 해당 부분으로 이동하기 , 프로젝트 섹션 부분이 navbar 위로 올라오는 에러 발생
- 메뉴가 클릭되면 값을 가져와서 addEventListener에 등록한 함수를 실행시킨다.
- 들어온 event 객체의 target에 접근해서 해당 이벤트가 일어난 요소를 가져온다.
menu에서 해당 페이지부분으로 스크롤 하기
- 메뉴의 요소를 가지고 와서 클릭 이벤트가 일어났을 때의 동작을 처리하기 위해 먼저 그 요소를 가져올 것이다.
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; }
따란! 우선 문제를 잘 해결했다!
Author And Source
이 문제에 관하여(메뉴 클릭 시 해당 부분으로 이동하기 , 프로젝트 섹션 부분이 navbar 위로 올라오는 에러 발생), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jy777hi/메뉴-클릭-시-해당-부분으로-이동하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)