javascript - How to hide/show nav bar when user scrolls up/down -

hide/show nav bar when user scrolls up/down

here's example i'm trying achieve: http://haraldurthorleifsson.com/ or http://www.teehanlax.com/story/readability/

the navigation bar slides off screen when scroll down , slides down on screen when scroll up. i've figured out how fade in/fade out achieve exact same animation in example. note: tried slidein() , way stretching animation...

jquery:

var previousscroll = 0, headerorgoffset = $('#header').offset().top;  $('#header-wrap').height($('#header').height());  $(window).scroll(function() {     var currentscroll = $(this).scrolltop();     console.log(currentscroll + " , " + previousscroll + " , " + 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> 

to inner content of nav slide instead of being progressively hidden, need animation on parent element, , keep inner element @ bottom of parent, so:

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