Headroom.js로 자동 숨기기 스티키 헤더 만들기

자동 숨기기 헤더 웹 디자인에서 꾸준히 인기를 얻고 있습니다. 많은 블로그와 온라인 잡지가 끈적한 헤더를 사용하여 사용자의 관심 유지 과 그들에게 네비게이션에 직접 접근 할 수있게해라..

중형 이 기능을 재정의했다. 그 기본 개념은 네비게이션을 숨 깁니다. 동안 아래로 스크롤 그러나 그것을 보여준다. 동안 위로 스크롤. 이 개념은 격렬한 인기 트렌드 이제는 쉽게 할 수 있습니다. 그것을 복제하다 ~을 사용하여 Headroom.js.

Headroom.js는 무료 바닐라 자바 ​​스크립트 라이브러리 의존성이나 과도한 API 기능은 필요 없습니다. HTML에 추가하고 페이지 머리글을 대상으로 실행하십시오..

간단하게 헤드 룸 애니메이트하는 특정 CSS 클래스를 추가하고 제거합니다. ~하기 위해서 헤더 표시 / 숨기기 JavaScript를 사용하여 모션 감지.

이 기능을 직접 만들 수도 있지만 왜 귀찮은가? 헤드 룸 테스트 및 모든 주요 브라우저를 지원합니다.. 그것도 jQuery 또는 Zepto로 멋지게 연주합니다. 사이트에 이미 JS 라이브러리가 설치되어있는 경우.

너는 찾을거야. 풍부한 코드 샘플 GitHub 저장소에 있지만 여기에 간단한 예 그 목표는 #머리글 요소:

 var myElement = document.querySelector ( "# header"); // #header 요소에서 전달되는 Headroom 객체를 만듭니다. var headroom = new Headroom (myElement); // 라이브러리를 초기화합니다. headroom.init (); 

그만큼 init () 기능에있다 맞춤 설정할 수있는 다양한 옵션. 다른 것을 사용자 정의 할 수 있습니다. 요소 클래스, 다른 것과 함께 이벤트 트리거 콜백 당신이 할 수있는 곳 자신의 기능을 내장하다.. 예를 들어, 고정 해제 된 후에 요소가 사라지도록하려면 onUnpin 콜백.

이 옵션은 모두 메인 플러그인 페이지에 나열, 그래서 그것을 확인하고 당신이 생각하는 것을보십시오. 너가보고 싶으면 행동중인 헤드 룸 아래에 펜이 들어있는 것을 보아라. 메인 데모 페이지의 전체 클론.