slide working up down

by lovromar

HTML

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

<p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p>

<p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p>

<p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p>
<p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p>
<p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p>
<p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p><p>
    casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
casfca sfia faof hauofauo fuiofahfa sofa souifa hof hasio fasio hfaios fioasifopa if aif
</p>


<div id="footer-wrap">
    <div id="footer" class="clear">
        <nav><h1>Foote</h1>another line<br/>another line
        </nav>
  ...

CSS

body {
    height: 1000px;
    margin:0;
    padding:0;
}

#header, #footer {
    width: 100%;
    height: 120px;
    background-color: #e0e0e0;
    
}

#header-wrap {
    top: 0px; 
    
    
 
}

#footer-wrap {
    bottom: 0px; 
}

#header-wrap, #footer-wrap {
    width: 100%;
    margin:0;
    padding:0;
    position: fixed;
}

JavaScript

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

$('#footer').hide();

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

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