[bootstrap] 부트스트랩 – 어픽스(Affix)

웹페이지에서 스크롤함에 따라 어떤 요소를 고정 요소로 전환하는 기능을 하는 플러그인입니다.

스크롤에 따라 메뉴가 하이라이트 되는 스크롤스파이(Scrollspy)와 비슷한 기능을 하지만 스크롤스파이는 보다 작은 규모의 콘텐츠에 사용되고 자체적으로 스크롤바가 나타납니다. 두 가지를 병합해 사용할 수도 있습니다.

이 기능을 추가하면 사이트 상단과 하단을 기준으로 일정한 거리만큼 스크롤 했을 때 지정된 요소의 위치를 고정(fixed)시키거나 원래의 위치로 복구하는 역할을 합니다.

 

 <p><a id=”myAffix” class=”btn btn-primary btn-lg” href=”#” role=”button”  data-spy=”affix” data-offset-top=”300” data-offset-bottom=”600“>Learn more &raquo;</a></p>

 

a 태그에 데이터 속성으로 data-spy=”affix”와 data-offset-top=”300″, data-offset-bottom=”600″을 추가합니다.
data-spy=”affix”는 어픽스 기능을 활성화시키고 .affix-top라는 선택자를 추가시킵니다. 스크롤해서 data-offset-top 값의 수치만큼 이동했을 때 클래스 선택자로 .affix를 추가하고 .affix-top을 제거합니다. 계속 스크롤하다가 하단으로부터 data-offset-bottom 값의 수치에 이르렀을 때 .affix를 제거하고 .affix-bottom 선택자를 추가합니다. 다시 위로 스크롤하면 속성 값에 따라서 다시 선택자들이 교체됩니다.

따라서 어떤 요소에 이 기능을 적용하느냐에 따라 이들 선택자를 대상으로 별도의 스타일시트를 설정해야 합니다. 여기서는 버튼을 대상으로 하므로 이 버튼을 콘텐츠 영역에서 벗어나 페이지의 왼쪽, 위로부터 100px 떨어진 곳에 배치될 수 있게 다음과 같이 설정했습니다.
.affix에는 이미 position:fixed;가 설정돼 있으므로 top과 left만 추가합니다.

.affix { top:100px; left:100px; }
.affix-bottom { position: absolute; }

 

스크롤해서 상단으로부터 300px 떨어진 곳에 이르면 버튼이 레이아웃에서 벗어나 배치됩니다. 계속 스크롤해서 하단으로부터 600px 떨어진 곳에 이르면 버튼이 안보이게 됩니다. data-offset-bottom은 반드시 필요한 것은 아니며 선택적으로 사용합니다.

 

옵션

자바스크립트는 다음과 같은 형태로 사용하며, 옵션은 두 가지가 있습니다.

$(“#myAffix”).affix( options );

 

• offset : 숫자 또는 function, object가 가능합니다. 기본 값은 10(data-offset-top=”10″)이며 숫자를 하나만 제공하면 top과 bottom 모두에 적용됩니다. top과 bottom을 따로 적용하려면 아래와 같이 설정합니다.

 

$(“#myAffix”).affix( offset: (top: 300), offset: (bottom: 600) });

 

부트스트랩 문서를 보면 다음과 같이 function을 사용한 예를 볼 수 있습니다. 아래의 경우 .footer를 footer 태그로 변경했습니다. 이 function은 footer 태그의 마진을 포함한 높이를 계산해서 bottom의 수치를 출력합니다.

$(‘#myAffix’).affix({
offset: {
top: 300,
bottom: function () {
return (this.bottom = $(‘footer’).outerHeight(true));
}
}
});

 

이전에 테스트한 data 속성 값과 일치하게 하려면 다음과 같이 footer의 높이를 설정하면 됩니다.

<footer style=”height:1600px;”>

 

• target : 어픽스 기능이 적용되는 범위를 의미하며 selector, node, jQuery 요소를 사용할 수 있습니다. 기본은 window 오브젝트입니다.

 

이벤트

이벤트는 6가지가 있으며 다음과 같습니다.

$(“#myAffix”).on(“affix.bs.affix”, function() {
alert(“이벤트 실행됨”);
});

 

• affix.bs.affix : 어픽스 기능이 실행되기 바로 전에 이벤트가 실행됩니다. 즉, affix-top 선택자에서 .affix 선택자로 교체되기 바로 전입니다.
• affixed.bs.affix : 어픽스 기능이 실행된 후에 이벤트가 실행됩니다. affix.bs.affix 이벤트와 시간적으로 거의 차이가 없습니다.
• affix-top.bs.affix : affix-top이 적용되기 바로 전에 이벤트가 실행됩니다. 즉 스크롤 업 할 때 .affix 선택자가 있는 상태에서 .affix-top 선택자로 교체되기 바로 전입니다.
• affixed-top.bs.affix : affix-top이 적용된 후에 이벤트가 실행됩니다.
• affix-bottom.bs.affix : affix-bottom이 적용되기 바로 전에 이벤트가 실행됩니다. 즉, .affix 선택자가 있는 상태에서 .affix-top 선택자로 교체되기 바로 전입니다.
• affixed-bottom.bs.affix : affix-bottom이 적용된 후에 이벤트가 실행됩니다.