[bootstrap] 부트스트랩 – 스크롤스파이(Scrollspy)

웹페이지에서 스크롤할 때 같은 페이지에 있는 콘텐츠의 내용과 연결된 메뉴를 표시하는 기능입니다.
또한, 해당 메뉴를 클릭하면 콘텐츠로 이동합니다. 

메뉴 부분은 냅바(navbar)를 사용해야 하며 우선 메뉴바에 아이디 선택자(예, navbar-example)를 만들고 콘텐츠 영역에서 이 아이디를 데이터 타겟으로 정합니다. 콘텐츠 영역에는 data-spy=”scroll”을 추가하고 각 메뉴의 <a> 태그에 링크를 만드는데 이 아이디를 콘텐츠 영역의 아이디와 일치시킵니다. data-offset은 스크롤할 때 상단으로부터의 거리이며 제대로 설정하지 않으면 콘텐츠가 상단에 있더라도 메뉴가 하이라이트 되지 않습니다. 설정하지 않으면 기본은 10픽셀입니다. 메뉴바를 고정(fixed)으로 사용할 때는 오프셋이 작동하지 않습니다. 

콘텐츠 영역의 스타일을 위해 클래스 선택자(scrollspay-example)를 추가하고 스타일을 설정합니다. 적당한 높이를 설정하고 메뉴바와의ㅣ 간격을 위해 상단 마진을 추가합니다.

.scrollspy-example { position: relative; height: 200px; margin-top: 10px; overflow: auto; }

 

body 태그에는 상대 포지션을 설정합니다.

.body { position: relative; }

 

data 속성을 사용하지 않고 자바스크립트를 사용할 때에는 다음과 같이 만듭니다.

$(‘body‘).scrollspy({ target: “#navbar-example” });

 

메서드는 .scrollspy(“refresh”); 하나이며 스크롤스파이를 사용하면서 이 기능과 연계하여 콘텐츠를 추가하거나 제거할 경우 새로고침이 필요하므로 다음과 같이 설정합니다.

$(‘[data-spy=”scroll”]’).each(function () {
var $spy = $(this).scrollspy(‘refresh‘);
});

 

옵션은 offset 하나입니다.

$(‘body‘).scrollspy({ offset:10 });

 

이벤트는  activ.bs.scrollspy 하나이며 스크롤 하거나 메뉴를 클릭해서 콘텐츠가 상단에 오면 이벤트가 실행됩니다.

$(‘#navbar-example’).on(‘activate.bs.scrollspy’, function () {
alert(“이벤트 실행됨”);
});