Jak ukryć/bar pokaz nav gdy przewinie użytkownika/dół

Question

Ukryj/pokaż pasek nav gdy użytkownik przewija w górę/w dół

Oto przykład usiłuję osiągnąć: http://haraldurthorleifsson.com/ lub http://www.teehanlax.com/story/readability/

Pasek nawigacyjny przesuwa się poza ekranem podczas przewijania w dół i przesuwa się z powrotem na ekranie po przewinięciu w górę. Zorientowałem się, jak to zrobić z zanikaniem/zanikaniem, ale chciałbym osiągnąć to z tą samą animacją, co w przykładzie. Uwaga: Próbowałem już SlideIn() i jak sposób, że robi animację rozciąganie ...

JQUERY:

var previousScroll = 0, 
headerOrgOffset = $('#header').offset().top; 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').fadeOut(); 
     } else { 
      $('#header').fadeIn(); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

CSS:

#header { 
    width: 100%; 
    z-index: 100; 
} 

.fixed { 
    position: fixed; 
    top: 0; 
} 

#header-wrap { 
    position: relative; 
} 

HTML:

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav> 
      <h1>Prototype</h1> 
     </nav> 
    </div> 
</div> 

Answer 1

Czy próbowałeś animować? ale zastąp -60px wysokością navbara. Ale negatywny.

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').animate({ 
       top: '-60px'  //Change to Height of navbar 
      }, 250);    //Mess with animate time 
     } else { 
      $('#header').animate({ 
       top: '0px' 
      },250); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 2

Aby uzyskać wewnętrzną treść nav ślizgać się zamiast stopniowo ukryty, trzeba zrobić animację na elemencie macierzystym i zachować element wewnętrzny na dole rodzica, tak jak poniżej:

jsfiddle

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav><h1>Prototype</h1>another line<br/>another line 
     </nav> 
    </div> 
</div> 

css

body { 
    height: 1000px; 
} 

#header { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
} 

#header-wrap { 
    width: 100%; 
    position: fixed; 
    background-color: #e0e0e0; 
} 

js

var previousScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
     } else { 
      $('#header-wrap').slideDown(); 
     } 
    } else { 
      $('#header-wrap').slideDown(); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 3

Cokolwiek navbar elementem użyć, musi zawierać transition: transform 0.3s na nim, a bazę transform z 0.

#navbar { 
    position: fixed; 
    right: 0; left: 0; top: 0; 
    /* your height */ 
    height: 40px; 
    /* .... */ 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform .3s; 
    -moz-transition: -moz-transform .3s; 
    -o-transition: transform .3s; 
    transition: transform .3s; 
} 
#navbar.scrolled { 
    /* subtract your height */ 
    -webkit-transform: translate3d(0,-40px,0); 
    -moz-transform: translate3d(0,-40px,0); 
    transform: translate3d(0,-40px,0); 
} 

Następnie JavaScript musi obserwować przewijanie użytkownika:

;(function(){ 
    var previousScroll = 0; 
    var navbar = document.getElementById('navbar'), 
     navClasses = navbar.classList; // classList doesn't work <IE10 

    window.addEventListener('scroll', function(e){ 
     var currentScroll = window.scrollY; 
     var isDown = currentScroll > previousScroll; 

     if (isDown && !navClasses.contains('scrolled')){ 
      // scrolling down, didn't add class yet 
      navClasses.add('scrolled'); // we hide the navbar 
     } else if (!isDown){ 
      // scrolling up 
      navClasses.remove('scrolled'); // won't error if no class found 
     } 

     // always update position 
     previousScroll = currentScroll; 
    }); 
}()); //run this anonymous function immediately 

Answer 4

Spróbuj nadproża js.

Można również edytować klasy CSS i wdrożyć efekt przejścia.

http://wicky.nillia.ms/headroom.js