jd-sticky v0.1.1

jdSticky API

• Sticky 기능 구현.
• 해당 영역에 맞는 탭 활성화 구현.
• 부드러운 탭 이동 구현. (IE10+)

파일 구성

• jdSticky.js : 순수 자바스크립트로 만든 플러그인. (IE9+)
• jquery.jdSticky.js : 제이쿼리를 참조하는 플러그인. (IE8+)
• xxx.module.js : ES6 모듈 적용 소스.

HTML

• 레이어팝업 이동을 위한 버튼에 data-layer-id의 값을 레이어팝업 ID와 동일하게 부여.

<button type="button" data-layer-id="layer1">레이어팝업 열기</button>

• 딤드는 dimmedEl 옵션에 부여한 값으로 클래스 설정.

<div class="dimmed"></div>

• 레이어팝업은 id를 꼭 부여해야하며, 레이어팝업 닫기 버튼은 closeEl 옵션에 부여한 값으로 클래스 설정.

<div id="stickyNav">
    <nav class="nav">
        <!-- {secUse: true} 옵션 사용 시 ul(ol) 추가 -->
        <ul class="nav-list">
            <!-- href 속성에 이동시킬 각 섹션의 id를 기입 -->
            <li><a class="btn-move-sec" href="#sec1">1</a></li>
            <li><a class="btn-move-sec" href="#sec2">2</a></li>
            <li><a class="btn-move-sec" href="#sec3">3</a></li>
            <li><a class="btn-move-sec" href="#sec4">4</a></li>
        </ul>
    </nav>
</div>

<!-- 섹션 -->
<section id="sec1"></section>
<section id="sec2"></section>
<section id="sec3"></section>
<section id="sec4"></section>

JS

• 기본구조

var sticky = new JdSticky('#stickyNav', {
    secUse: true
    ...
});

• 옵션값