09.NavaigationBar2 js부분 질문입니다.

인프런 커뮤니티 질문&답변

작성한 질문수

나만의 포트폴리오 웹페이지 만들기

작성

150

안녕하세요. 강의 잘 보았습니다.

마지막 NavigationBar2 부분에서

window.scrollTo(0, document.getElementById(id).offsetTop - 70);

scrollTo함수의 y좌표값을 왜 offsetTop -70으로 설정했는지 궁금합니다.

scrollTo함수나 offsetTop 함수에 대한 사전 설명없이 그냥 진행하시다보니

그 부분에 대해 미리 숙지하지않으면 이해가 어렵네요.

offset API 시리즈는 부모의 포지셔닝 정책에 따라 절대좌표 or 상대좌표가 나올 수 있다고는 알고있는데

아직 정확하게 이해가 되지는 않습니다...

반응형웹으로 제작하였는데 왜 getBoundingClientRect()가 아닌 offset 을 사용했는지 궁금합니다.

이 부분에 대한 추가설명 요청드립니다.

답변 1

지식공유자

안녕하세요.

offsetTop - 70 부분은 메뉴 아이템을 클릭하여 페이지내 스크롤 이동을 하였을 때 메뉴바에 의해 가려지는 영역을 보여주기 위해 작성한 코드입니다. 글로만 보셔서는 와닿지 않으신다면 '- 70' 을 제거하고 테스트해보시면 설명이 되실거라 생각합니다.

그리고 offsetAPI 를 사용한 것은 개인적으로 자주 사용하는 함수이기 때문에 적용한 것으로 getBoundingClientRect() 를 선호하신다면 사용하셔도 무방합니다.

좋은 하루 되세요 ~

작성한 질문수