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

회원가입

출석체크

마이페이지

CGIMALL

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

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

클라우드태그

Javascript

php

ASP

css

html

mysql

jquery

image

API

mobile

메뉴

slide

게시판

현재접속자 명

스크롤 다운시 메뉴가 숨겨지는 스크립트 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;
});

});