머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

Headroom

Headroom 플러그인은 페이지 스크롤에 반응할 수 있습니다. 예를 들어 페이지를 아래로 스크롤하면 상단 앱 바가 사라지고, 위로 스크롤하면 상단 앱 바가 나타납니다.

이전에 소개된 스크롤 시 상단 앱 바 자동 숨김 및 하단 앱 바 자동 숨김 기능은 이 플러그인을 사용하여 구현되었습니다.

호출 방식

이 방식을 사용하면 JavaScript 코드를 작성할 필요가 없습니다. 요소에 mdui-headroom="options" 속성을 추가하기만 하면 플러그인이 활성화됩니다.

컴포넌트가 동적으로 생성된 경우 mdui.mutation()을 호출하여 초기화해야 합니다.

<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>

플러그인 인스턴스화:

// selector는 CSS 선택자 또는 DOM 요소입니다.
// options는 플러그인 매개변수입니다. 아래 매개변수 목록을 참조하세요.
var inst = new mdui.Headroom(selector, options);

매개변수 이름	유형	기본값	설명
`tolerance`	`int` \| `Object`	`5`	요소가 숨겨지기 시작할 때까지의 스크롤 거리입니다. 매개변수 값이 숫자인 경우 상하 스크롤 트리거 거리가 같음을 의미합니다. 개체일 수도 있으며, 상하 스크롤 트리거 거리를 각각 지정할 수 있습니다. 예: `{ down: 10, up: 5 }`.
`offset`	`int`	`0`	페이지 상단에서 지정된 거리만큼 떨어진 후 스크롤 시 요소를 숨기기 시작합니다.
`initialClass`	`string`	`mdui-headroom`	플러그인 초기화 후 요소에 추가되는 CSS 클래스입니다.
`pinnedClass`	`string`	`mdui-headroom-pinned-top`	요소가 고정되었을 때 추가되는 CSS 클래스입니다.
`unpinnedClass`	`string`	`mdui-headroom-unpinned-top`	고정이 해제되었을 때 추가되는 CSS 클래스입니다.

메서드 이름	설명
`pin()`	요소를 고정시킵니다.
`unpin()`	요소를 숨깁니다.
`enable()`	headroom 플러그인을 활성화합니다.
`disable()`	headroom 플러그인을 비활성화합니다.
`getState()`	현재 요소의 상태를 가져옵니다. 총 네 가지 상태(`pinning`, `pinned`, `unpinning`, `unpinned`)가 포함됩니다.