Affix

Affix 플러그인은 scroll 이벤트를 체크하여 다양한 기능을 구현할 수 있도록 구조화되었다.현재 제공되는 기능은 아래의 2 가지 기능이다. Scroll 플러그인을 사용할 때 type 값 설정은 필수이다.

Contents

• Contents
• Usage
• Options
• Events

Affix 기능은 특정 엘리먼트를 페이지의 특정 위치에 고정(position:fixed)시켜준다. 이 기능은 네비게이션 혹은 특정 아이콘을 마우스 스크롤 이벤트가 발생하면 미리 정해진 특정 위치에 고정시키기 위해서 자주 사용된다. 이 플러그인에서는 affix,affix-top, affix-bottom 3 개의 class 를 사용하며 각각의 상황(state)가 다르며 또한, 각 상황별로 이벤트를 발생시킬 수 있다.

Usage

Via data-* 속성을 이용한 방법

적용할 대상 엘리먼트에 아래와 같이 data-속성을 마크업 해준다.

<div data-control="scroll" data-type="affix" class="affix-top">
  ...
</div>

Via JavaScript 이용한 방법

Default

$('selector').scroll({type:'affix'});

Use Single Offset

$('selector').scroll({
  type:’affix’,
  offset:{top:80}
});

Use Multiple Offset

$('selector').scroll({
  type:’affix’,
  offset:{top:50,bottom:80}
});

Use Function Offset

$('selector').scroll({
  type:’affix’,
  offset: {top: $('.bar').outerHeight(true)}
});

Options

Events