test_li 한테 active class 붙으면 클래스 생긴 li에 밑줄 생김


내가 짜려한거


1번부터 6번까지 id="section01" ~ id="section06" 의 각각의 section 이 있음


.nav_wrap 은 position:sticky 로 상단에 고정


스크롤 할때마다 nav 위치를 감지해서 section 제일 상단에 올 때와 섹션 상단부터 height 까지 올 때(즉 nav가 영역 안에 있을 때) 해당 li 에 active 효과를 줌


그리고 화면 너비 900 이하에서 nav 크기가 짤리니까 (아래 사진처럼) 스크롤 내려서 3번 section 에 도달했을 때 nav 의 section 3 을 제일 왼쪽으로 당겨오고 싶음



그래서 active 클래스가 붙었을 때 offset().left 로 위치를 구한 뒤 nav를 해당 위치만큼 scrollLeft 로 밀려했는데


문제 1. section 이 딱딱 떨어지게 구성되어 있는게 아니어서 active 클래스가 안붙는 빈 영역이 있어서 거기로 이동하면 오류가 남

(스크롤 할때마다 nav가 scrollLeft(0) 에 갔다가 scrollLeft(x) 위치에 갔다가 왔다갔다 반복함)


문제 2. 문제 1을 해결하기 위해 각각의 section 영역을 정확하게 지정하니 section 끼리 겹치는 구간에서는 active 효과가 2개 붙어서 밑줄이 2개 생기는 오류 발생


이 문제 2번 때문에 원래 nav 의 height 만큼 빼서 위치를 구해야 하는데 그걸 못하고 있음


코잘알 선생님들 코드를 다 짜달라는 염치없는 말은 하지 않을테니 부디 작은 힌트라도..