JQuery 내비게이션바 자동숨김

1 개요[ | ]

jQuery 내비게이션바 자동숨김

CSS 내비게이션바 상단 고정 예제에 자동숨김 기능을 붙임
모바일 기기에서는 화면이 작으므로 내비게이션바를 적당히 숨기는 것이 좋아 보임
스크롤을 내리면 내비게이션바가 위로 퇴장하고,

스크롤을 올리면 내비게이션바가 위에서 등장함

<style>
html {
  height: 200%;
  background: linear-gradient(red, yellow, green);
}
body { margin: 0; }
.navbar {
  background: hotpink;
  margin: 0; padding: 0;
  list-style: none;
  position: fixed;
  width: 100%;
  transition: transform .3s;
}
.navbar.hide {
  transform: translateY(-100%);
}
.navbar>li {
  display: inline-block;
}
.navbar>li>a {
  display: block;
  text-decoration: none;
  padding: 10px 20px;
  color: white;
}
.navbar>li>a:hover {
  background: deeppink;
}
</style>

<ul class="navbar">
  <li><a href="#">홈</a></li>
  <li><a href="#">1번 메뉴</a></li>
  <li><a href="#">2번 메뉴</a></li> 
</ul>


<script src="//code.jquery.com/jquery.min.js"></script>
<script>
var last_top = 0;
$(window).scroll(function() {
  var this_top = $(this).scrollTop();
  if( this_top > last_top ) {
    $(".navbar").addClass("hide");
  }
  else {
    $(".navbar").removeClass("hide");
  }
	last_top = this_top;  
});
</script>

2 같이 보기[ | ]

3 참고[ | ]