스크롤 반응형 헤더, 스크롤 반응형 탭(네비게이션), responsive nav, sticky tab

 

 

오늘은 새로운 요청이 있어 진행했던 UI 수정에 대해서 글을 써보려고 합니다.

 

1. 스크롤을 내리면 잠시 가려지고, 스크롤을 올리면 다시 나타나는 헤더

2. 스크롤을 내리다가 일정 스크롤에 도달했을 때, 그 때 부터 지정 위치에 들러 붙는 sticky nav

 

 

See the Pen Header hide on scroll, Sticky nav by Junmannn (@Junmannn) on CodePen.

 

구분을 쉽게 하기 위해

header는 id 로 div에 두어, css 상에서 #header 정리 부분을 보시면 됩니다.

sticky는 class로 두어 css 상에서 .sticky 를 보시면 됩니다.

 

스크롤에 다라 반응하며 보였다 사라졌다를 반복하는 헤더,

위치가 고정되었다가, 움직였다가 하는 방식을 알아보았습니다.

 

자세한 설명을 JS 파일에 작성해두었습니다