본문 바로가기

개발일상

[SPAVEL] 네비게이션 메뉴에서 막혔지만 해결했다! 🥸

 

네비게이션에서 메뉴를 클릭했을 때 해당 섹션으로 이동하는 코드를 짰다.

 

처음에 했을 땐 섹션에 id 값을 주고, 메뉴의 a 태그 링크에 이동하길 원하는 섹션의 id값을 주면 이동이 되긴 했지만

그러다보면 클릭을 했을 때 메뉴에 fixed를 줬을 경우 메뉴의 높이만큼 화면이 가려지게 되었다.

 

 

PC라면 상관이 없겠지만, 모바일 화면에선 이게 은근히 신경쓰여서

결국 JS로 한번 작업을 해보기로 했다!

 

jQuery를 사용한 방법들은 많았지만, 바닐라JS로 해보고 싶었어서 열심히 검색을 했다.

그리고 원하던 기능을 설명해주는 페이지가 나왔는데,

그 방법은 반복되는 코드들 때문에 코드가 너무 길어질 것 같았다.

내 나름대로 코드를 줄일 방법을 찾아냈다.

 

그 방법은  따로 정리해서 또 블로그 글로 작성해뒀다.😊

 

 

 

[Javascript] 메뉴 클릭시 네비게이션 높이만큼 띄우고 섹션으로 이동하기

 

 

나머지도 잘 해보자 아자자~~!!

 

- 끝 -