웹 UI, UX개발을 하다보면 scroll event 및 특정 Element의 위치는 거의 무조건 다루게 된다. 때문에 JavaScript에서 Scroll event를 이해하고, Element의 위치에 따라 특정 로직을 매끄럽게 수행하도록 하는 것은 웹 개발에서 중요한 부분 중 하나이다. 내가 구현하고자 하는 부분은 DOM을 활용하여 아래 GIF와 같이 스크롤 시에 해당 id가 나타나게 되면 목차에 하이라이팅을 하는 것이다. 우선 해당 기능을 구현하기 위해 알아야할 것이 어떤 정보들이 있을까? 수직 스크롤바 위치 목차에 해당하는 elements 요소들의 Y축 위치 값 즉, 수직 스크롤바 위치 = elements 요소들의 Y축 위치 값 — 80 다음과 같은 조건으로 해당 기능을 구현하도록 로직을 구성했다...
