jQuery sticky menu, scroll spy
2021. 12. 16. 09:55ㆍStudy/jQuery
See the Pen jQuery sticky, spy by miok (@slog-miok) on CodePen.
CSS
*{margin: 0 ; padding: 0}
ol,ul{list-style: none}
a{color: #333; text-decoration: none}
#wrap{width:1000px; margin: 0 auto; overflow: hidden}
header{position: fixed; left:0; top:0; height:150px; background: #0f0; width: 100%; z-index: 50}
.main{height: 200px; background: orange; margin-top: 150px}
.navBox{ background: #ccc}
/* 상단에 고정 sticky menu */
.navOn{position: fixed; left:0; top: 0; width: 100%; z-index:60;}
.navBox nav{width:1000px; margin: 0 auto}
.navBox ul{overflow: hidden}
.navBox ul li{float: left; width:25%; text-align: center}
.navBox ul li a{display: block; font-size: 2em; font-weight: bold; background: #ccc;
padding: 10px 0; color: #333; transition: all .8s}
/* 메뉴 활성화 scroll spy */
.navBox ul li a.spy{background: #333; color: #f00}
#content div{position: relative; top:0; right:-1000px; opacity: 0; transition: all .8s}
#content .sec1{height: 500px; background: #f00}
#content .sec2{height: 600px; background: #0f0}
#content .sec3{height: 400px; background: #00f}
#content .sec4{height: 500px; background: pink}
/* scroll animation 최종값(목적지) */
#content div.boxMove{right:0; opacity: 1;}
footer{height: 150px; background: #999}
.text{position: fixed; right:0; top: 0; font-size: 50px; z-index: 100}
JS
$(document).ready(function () {
$('.subNav li:eq(0)').find('a').addClass('spy');//첫번째 서브메뉴 활성화
$('#content div:eq(0)').addClass('boxMove');//첫번째 내용글 애니메이션 처리
var smh= $('.main').height();
var h1= $('#content div:eq(1)').offset().top-500 ;
var h2= $('#content div:eq(2)').offset().top-500 ;
var h3= $('#content div:eq(3)').offset().top-500 ;
$(window).on('scroll',function(){//스크롤의 좌표가 변하면.. 스크롤 이벤트
var scroll = $(window).scrollTop();//스크롤top의 좌표를 담는다
$('.text').text(scroll);//스크롤 좌표의 값을 찍는다.
//sticky menu 처리
if(scroll>smh){
$('.navBox').addClass('navOn');//스크롤의 거리가 350px 이상이면 서브메뉴 고정
$('header').hide();
}else{
$('.navBox').removeClass('navOn');//스크롤의 거리가 350px 보다 작으면 서브메뉴 원래 상태로
$('header').show();
}
$('.subNav li').find('a').removeClass('spy');//모든 서브메뉴 비활성화~ 불꺼!!!
//스크롤의 거리의 범위를 처리
if(scroll>=0 && scroll<h1){
$('.subNav li:eq(0)').find('a').addClass('spy');//첫번째 서브메뉴 활성화
$('#content div:eq(0)').addClass('boxMove');//첫번째 내용 콘텐츠 애니메이
}else if(scroll>=h1 && scroll<h2){
$('.subNav li:eq(1)').find('a').addClass('spy');//두번째 서브메뉴 활성화
$('#content div:eq(1)').addClass('boxMove');
}else if(scroll>=h2 && scroll<h3){
$('.subNav li:eq(2)').find('a').addClass('spy');//세번째 서브메뉴 활성화
$('#content div:eq(2)').addClass('boxMove');
}else if(scroll>=h3){
$('.subNav li:eq(3)').find('a').addClass('spy');//네번째 서브메뉴 활성화
$('#content div:eq(3)').addClass('boxMove');
}
// //스크롤의 거리의 범위를 처리
// if(scroll>=0 && scroll<500){
// $('.subNav li:eq(0)').find('a').addClass('spy');//첫번째 서브메뉴 활성화
// $('#content div:eq(0)').addClass('boxMove');//첫번째 내용 콘텐츠 애니메이
// }else if(scroll>=500 && scroll<1100){
// $('.subNav li:eq(1)').find('a').addClass('spy');//두번째 서브메뉴 활성화
// $('#content div:eq(1)').addClass('boxMove');
// }else if(scroll>=1100 && scroll<1500){
// $('.subNav li:eq(2)').find('a').addClass('spy');//세번째 서브메뉴 활성화
// $('#content div:eq(2)').addClass('boxMove');
// }else if(scroll>=1500){
// $('.subNav li:eq(3)').find('a').addClass('spy');//네번째 서브메뉴 활성화
// $('#content div:eq(3)').addClass('boxMove');
// }
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/sticky.js"></script>
</head>
<body>
<div id="wrap">
<header>헤더영역</header>
<div class="main">메인 비주얼영역</div>
<div class="container">
<div class="navBox">
<nav class="subNav">
<ul>
<li><a href="#">MENU01</a></li>
<li><a href="#">MENU02</a></li>
<li><a href="#">MENU03</a></li>
<li><a href="#">MENU04</a></li>
</ul>
</nav>
</div>
<article id="content">
<div class="sec1">본문1</div>
<div class="sec2">본문2</div>
<div class="sec3">본문3</div>
<div class="sec4">본문4</div>
</article>
</div>
<footer>푸터영역</footer>
</div>
<div class="text">0</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery Swiper (0) | 2021.12.27 |
|---|---|
| jQuery scroll 스크롤 끝을 확인하는 방법 (0) | 2021.12.21 |
| jQuery left right clone gallery (0) | 2021.12.15 |
| jQuery 문자열을 변수로 변환하는 함수 eval (0) | 2021.12.15 |
| jQuery silde left (partenr banner) (0) | 2021.12.15 |
