시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 스크롤 > 스크롤 위치에 따른 jquery 메뉴활성화 효과 상세정보
사이트등록
현재접속자 새로고침
스크롤 위치에 따른 jquery 메뉴활성화 효과
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 스크롤
다운로드 횟수 16 회
간단설명 스크롤 영역의 위치에 따라 상단메뉴가 활성화 되어 현재 스크롤 영역의 위치가 어떤 메뉴인지를 확인할 수 있는 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>

 <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>



 


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 86783376 보이는 도배방지키를 입력하세요.