스크롤 스파이가 무엇인지는 이 페이지를 보시면 확실히 아실 수 있습니다. 스크롤 하시면서 좌측에 고정되어있는 사진을 유심히 살펴봐 주세요.
부트스트랩 scrollspy는 이곳을 확인하시면 됩니다.
웹 페이지에서 글을 읽을 때, 종종 원하는 요소로 빠르게 이동할 수 있도록 내비게이션 메뉴를 이용하곤 합니다.
스크롤 스파이는 그 내비게이션 메뉴에 곁들여서, 사용자가 지금 어느 부분을 보고 있는지를 직관적으로 표시해주는 역할을 합니다.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <ul id="scroll-spy"> <li class="active"> <a href="#num1">#1</a> </li> <li> <a href="#num2">#2</a> </li> <li> <a href="#num3">#3</a> </li> <li> <a href="#num4">#4</a> </li> <li> <a href="#num5">#5</a> </li> </ul> <div id="num1"></div> <div id="num2"></div> <div id="num3"></div> <div id="num4"></div> <div id="num5"></div> | cs |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | window.onload = function () { var a, b = $("#scroll-spy"), c = b.outerHeight() + 15, d = b.find("a"), e = d.map(function () { var f = $($(this).attr("href")); if (f.length) return f }); $(window).scroll(function () { var f = $(this).scrollTop() + c, g = e.map(function () { if ($(this).offset().top < f) return this }); g = g[g.length - 1]; var h = g && g.length ? g[0].id : ""; a !== h && (a = h, d.parent().removeClass("active").end().filter("[href='#" + h + "']").parent().addClass("active")) }) }; | cs |
기본적으로 이렇게 구성됩니다.
해당 요소를 읽고 있을 때 li에게 "active"란 class를 부여해줍니다.
첫 번째 요소가 페이지 최상단에 있어, 스크롤을 하지 않아도 보이는 상태라면, 예제처럼 첫 번째 li에는 active란 class를 미리 부여하시는 게 좋습니다.
이렇게만 사용하시면 scrollspy 내비게이션을 클릭하셨을 때, 해당 부분으로 이동하는 게 투박해 보일 수 있으니, 요소로 부드럽게 이동하는 스크립트와 함께 사용하시면 더욱 좋습니다.
1 2 3 4 5 6 7 8 9 10 11 | $("a").on("click", function (d) { if ("" !== this.hash) { d.preventDefault(); var e = this.hash; $("html, body").animate({ scrollTop: $(e).offset().top }, 800, function () { window.location.hash = e; }) } }) | cs |
, function () {
window.location.hash = e;
}
이동한 후에 주소창에 #lorem 처럼 해시가 남는 게 싫으시다면 이만큼을 지워주시면 됩니다.
스크립트 외에도 scroll-behavior: smooth; 라는 css를 이용해도 되긴 하지만, 크롬/파이어폭스 이외의 브라우저는 지원하지 않는 기능이라 범용성이 굉장히 떨어집니다.