정보실

웹학교

정보실

javascript Headroom.js - 필요할 때까지 머리글을 숨깁니다.

본문

Headroom.js는 사용자의 스크롤에 반응 할 수 있는 경량의 고성능 JS 위젯 (종속성이 없음!)입니다. 

이 사이트의 헤더는 실제 예이며, 아래로 스크롤 하면 보이지 않고 위로 스크롤 하면 뒤로 미끄러집니다.


고정 헤더는 기본 탐색을 사용자와 가깝게 유지하는 데 널리 사용되는 방법입니다. 이를 통해 사용자가 사이트를 빠르게 탐색하는 데 필요한 노력을 줄일 수 있지만 문제가 없는 것은 아닙니다.


큰 화면은 대개 가로 방향이므로 가로 공간보다 세로가 적습니다. 따라서 고정 헤더는 컨텐츠 영역의 상당 부분을 차지할 수 있습니다. 작은 화면은 일반적으로 세로 방향으로 사용됩니다. 화면의 전체 높이로 인해 세로 공간이 더 넓어 지지만 의미 있는 크기의 헤더가 여전히 인상적 일 수 있습니다.


Headroom.js를 사용하면 필요할 때 요소를 볼 수 있으며 나머지 시간에는 콘텐츠에 집중할 수 있습니다.


어떻게 작동합니까? 


가장 기본적인 headroom.js는 스크롤 이벤트에 대한 응답으로 요소에서 CSS 클래스를 추가하고 제거합니다.


<!-- initially -->
<header class="headroom">

<!-- scrolling down -->
<header class="headroom headroom--unpinned">

<!-- scrolling up -->
<header class="headroom headroom--pinned">

CSS 클래스에 의존하면 headroom.js에 놀라운 유연성이 제공됩니다. 

위로 또는 아래로 스크롤 할 때 수행 할 작업의 선택은 이제 전적으로 귀하의 것입니다. 

사용자의 스크롤에 응답하여 CSS로 수행 할 수 있는 모든 작업이 가능합니다.


사용법 


headroom.js를 사용하는 것은 정말 간단합니다. 

순수한 JS API와 선택적 jQuery 플러그인 및 AngularJS 지시문이 있습니다. 

페이지에 headroom.js 스크립트를 포함시키고 다음을 수행하십시오.

// if you're using a bundler, first import:
import Headroom from "headroom.js";
// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 45회 ]  작성일19-09-27 11:59

웹학교