시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 메뉴 관련 > 스크롤 다운시 메뉴가 숨겨지는 스크립트 Auto hiding Navbar on scroll down 상세정보
사이트등록
현재접속자 새로고침
스크롤 다운시 메뉴가 숨겨지는 스크립트 Auto hiding Navbar on scroll down
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 메뉴 관련
다운로드 횟수 6 회
간단설명 스크롤을 다운시 메뉴가 자동으로 숨겨지고 업하면 출력되는 스크립트
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기




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




js


$(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;
  });
 
});



스크롤을 다운할때 메뉴바의 위치를 상단으로 이동시켜서 안보이게 합니다.

스크롤을 업하면 원래의 위치로 이동합니다.


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 34327641 보이는 도배방지키를 입력하세요.