스크롤 다운시 메뉴가 숨겨지는 스크립트 Auto hiding Navbar on scroll down happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 메뉴 관련 > 스크롤 다운시 메뉴가 숨겨지는 스크립트 Auto hiding Navbar on scroll down 상세정보

클라우드태그

javascript

php

CSS

html

ASP

API

jquery

mysql

image

mobile

slide

게시판

메뉴

현재접속자 37명

스크롤 다운시 메뉴가 숨겨지는 스크립트 Auto hiding Navbar on scroll down

해피팀

네티즌

소스분류

메뉴 관련

다운로드 횟수

166 회

간단설명

스크롤을 다운시 메뉴가 자동으로 숨겨지고 업하면 출력되는 스크립트

평가하기

html

<nav>
<div class="container">
    <a href="#" id="brand">Brand</a>
    <button>
      <span></span>
      <span></span>
      <span></span>
    </button>

    <ul class="navbar-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">page a</a></li>
      <li><a href="#">page b</a></li>
      <li><a href="#">page c</a></li>
      <li><a href="#">page d</a></li>
    </ul>

</div>
</nav>

css

body
background: #eee
min-height: 3000px
padding: 0
margin: 0
font-family: 'Open Sans', sans-serif

.container
width: 80%
margin: 0 auto
clear: both

a
display: inline-block
color: #333
text-decoration: none

nav
background: #fff
height: 80px
line-height: 80px
box-shadow: 1px 1px 1px rgba(0, 0,0, 0.2)
position: fixed
top: 0
left: 0
width: 100%
z-index: 9998
transition: all 0.5s
&.scrollUp
    transform: translateY(-80px)

ul.navbar-menu
    margin: 0
    padding: 0
    display: inline-block
    float: right

    li
      display: inline-block
      margin: 0 10px
      a
        color: #666
        font-size: 14px

a#brand
    text-transform: uppercase
    foat: left
    font-weight: 800
    font-size: 20px

button
    background: none
    width: 30px
    height: 40px
    margin-top: 20px
    border: none
    float: right
    display: inline-block
    cursor: pointer
    display: none

    span
      width: 30px
      height: 40px
      height: 2px
      background: #333
      display: block
      margin: 5px 0

@media (max-width: 768px)
nav ul.navbar-menu
display: none
nav button
display: block

$(document).ready(function () {

'use strict';

var c, currentScrollTop = 0,
navbar = $('nav');

   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = navbar.height();

      currentScrollTop = a;

      if (c < currentScrollTop && a > b + b) {
        navbar.addClass("scrollUp");
      } else if (c > currentScrollTop && !(a <= b)) {
        navbar.removeClass("scrollUp");
      }
      c = currentScrollTop;
});

});