[제이쿼리] 스크롤 방향에 따라 슬라이드 되는 헤더 만들기
동작 원리 사용자의 스크롤이 아래로 향한다면 콘텐츠를 탐색하길 원하는 것이라 간주하고 헤더부분을 감추고, 스크롤이 위로 향한다면 처음으로 돌아가거나 네비게이션을 찾아 이동하는 것으로 간주하여 헤더부분을 재등장 시키는 원리이다. 헤더 요소에 position: fixed 를 설정한다. 스크롤 방향이 아래로 향한다면 헤더 요소에 클래스를 추가하고 이 클래스에 의해 헤더가 위로 사라진다. 스크롤 방향이 위로 향한다면 추가한 클래스를 제거하여 헤더 요소가 재등장한다. HTML CSS body { padding-top: 40px; // 헤더 높이만큼 여백부여 } header { position: fixed; top: 0; left: 0; width: 100%; height: 40px; background: #f5b..
