[해피CGI][cgimall] 스크롤 위치에 따른 jquery 메뉴활성화 효과

 

"메뉴1" 에 해당하는 스크롤 영역의 위치를 보시면 최상단에 배치되어있습니다.

스크롤을 계속해서 내리게되면 아래와 같이 "메뉴2" 에 해당하는 스크롤에 위치하면 메뉴2 부분이 활성화 됩니다.

 

 

해당 소스는 메뉴의 갯수 제한없이 본문영역내에 id 값을 추가로 늘리고, 메뉴의 싱크만 맞춰주시면

무한대로 늘릴 수 있습니다.


<aside id="nav">
    <nav>
        <a href="#1" class="active">메뉴1</a>
        <a href="#2">메뉴2</a>
        <a href="#3">메뉴3</a>
        <a href="#4">메뉴4</a>
        <a href="#5">메뉴5</a>
        <a href="#6">메뉴6</a>
    </nav>
</aside>

 <section id="main">
    <div class="target" id="1" style="background:red;">메뉴1 본문영역</div>
    <div class="target" id="2" style="background:blue;">메뉴2 본문영역</div>
    <div class="target" id="3" style="background:yellow;">메뉴3 본문영역</div>
    <div class="target" id="4" style="background:green;">메뉴4 본문영역</div>
    <div class="target" id="5" style="background:yellow;">메뉴3 본문영역</div>
    <div class="target" id="6" style="background:green;">메뉴4 본문영역</div>
</section>