jQuery animate()를 이용한 헤더 navigation 만들기
오늘은 jQuery effects 중 animate()를 이용한 헤더 부분의 navigation bar를 제작해보자.
스크롤을 내렸을 때 navigation bar에 효과를 주려고 한다.
먼저 html, css로 간단하게 header 부분의 navigation bar를 만들어보자.
<html, css 소스코드>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE HTML> <html lang='ko'> <head> <style> body{ height: 2000px; } #header { width: 100%; height: 45px; background:#cdd; } div{ float: left; padding: 12px 20px; letter-spacing: 2px; } </style> </head> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <body> <header id="header"> <div class="home">HOME</div> <div class="myhome">MYHOME</div> <div class="click">CLICK</div> <div class="contact">CONTACT</div> </header> </body> </html> | cs |
d
<실행 화면>
위에처럼 화면이 나올 것이다.
(소스코드를 설명해보자면 ,
body는 일부러 스크롤 적용을 위해 "height:2000px"로 값을 지정해주었다.
나머지 header 안의 div는 예시문으로 간단하게 제작했다.)
스크롤 시 메뉴바가 상단에 고정되어 있어서 내려오질 않는다.
css로 헤더부분이 스크롤 시에도 상단에 고정되게 style을 수정해보자.
간단하다.
#header에 "position: fixed;"를 추가하면된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> body{ height: 2000px; } #header { position:fixed; width: 100%; height: 45px; background:#cdd; } div{ float: left; padding: 12px 20px; letter-spacing: 2px; } </style> | cs |
위 사진처럼 스크롤을 해도 상단에 고정되게 된다.
이제 본격적으로, jQuery animate()를 이용하여 스크롤 시 효과를 적용해보자. (jQuery cdn은 head태그 밑에 두었다.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> $(function(){ var x = 0; // 스크롤을 하면 : 1 , 스크롤 안하면: 0인 boolean 변수 $(window).scroll(function(){ //window 스크롤을 했을 때 console.log('scroll'+':'+$(window).scrollTop()); // 마우스 스크롤 시 스크롤 값 테스트 if($(window).scrollTop()>=100){ // 만약 scrollTop()의 값이 100이상이면 console.log('boolen'+':'+x); //boolean 값 테스트 if(x==0){ // scollTop()의 값이 100이상이고, boolean 변수 값이 0이면 $('#header').stop().animate({top:'-45'},0,"swing").animate({top:'8'},150,"swing");; // 스크롤바 animate() 활성화 x=1; // boolean 변수는 1로 변환 } } else{ // scrollTop()의 값이 100 이상이고, boolean 변수 값이 0이 아니면 $('#header').stop().animate({top:'8'},0,"swing"); // 스크롤바 animate() 초기화 x=0; // boolean 값은 0으로 변환 } }); }); </script> | cs |
<실행 화면>
위와 같이 스크롤 시에도 정상적으로 애니메이션이 동작되는 것을 확인할 수 있다.
'JS, CSS, jQuery, HTML, AJAX > jQuery' 카테고리의 다른 글
| jQuery로 Skill bar 만들어보기 (0) | 2018.01.24 |
|---|---|
| mouseenter / mouseleave 이벤트 (0) | 2018.01.24 |