스크롤 위치에 따른 jquery 메뉴활성화 효과 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 스크롤 > 스크롤 위치에 따른 jquery 메뉴활성화 효과 상세정보

클라우드태그

javascript

HTML

PHP

Api

CSS

ASP

2022

mysql

메일링

모듈

jquery

쇼핑몰

카운터

현재접속자 명

스크롤 위치에 따른 jquery 메뉴활성화 효과

해피팀

네티즌

소스분류

스크롤

다운로드 횟수

973 회

간단설명

스크롤 영역의 위치에 따라 상단메뉴가 활성화 되어 현재 스크롤 영역의 위치가 어떤 메뉴인지를 확인할 수 있는 jquery 소스 기반의 메뉴활성화 효과입니다. ie10이상, 크롬, 파이어폭스등 대부분의 브라우저에서 호환성이 높아 유용하게 이용이 가능합니다.

평가하기

"메뉴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>