scrollify.js의 pagination (네이비게이션)

scrollify를 이용해 화면 우측에 위와 같은 pagination을 만들었다.

(html, css는 생략)

 

현재 section에 해당하는 원(span)에 active-dot 클래스를 추가하면 원의 색이 채워지고,

opacity: 0이 기본값인 텍스트(div)에 active-text 클래스를 추가하면 opacity: 1로 글자가 표시되게 했다.

 

결과적으로 scrollify 스크립트 코드에 아래와 같이 before 함수를 추가하면 된다. move() 동작 전에 함수가 실행된다.

ref엔 현재 section의 이름이 저장된다. data-section-name 값을 지정한 경우 그 값이 이름이 된다. (url #뒤에 표시됨)

$.scrollify({
    section : ".scrollSection",
    scrollbars: true,
    overflowScroll: true,
    setHeights: false,
    touchScroll: false,

    before:function(i, sections) {
        var ref = sections[i].attr("data-section-name");
        $(".main-nav .active-text").removeClass("active-text");
        $(".main-nav .active-dot").removeClass("active-dot");
        $(".main-nav").find("div[class=\"nav-text nav-text-" + ref + "\"]").addClass("active-text");
        $(".main-nav").find("span[class=\"nav-dot-" + ref + "\"]").addClass("active-dot");
    },
});

이때 jquery의 find를 사용해 현재 section에 해당하는 div와 span을 일치하는 class로 찾는데,

class 1개가 아닌 전체 클래스로 find해야 한다. ("nav-text nav-text-")