JS, CSS, jQuery, HTML, AJAX/jQuery

jQuery animate()를 이용한 헤더 navigation 만들기

littlemk 2018. 1. 26. 12:52

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



<실행 화면>



위와 같이 스크롤 시에도 정상적으로 애니메이션이 동작되는 것을 확인할 수 있다.

저작자표시 비영리 변경금지