向上/向下滑動導航欄和底部工具欄（如Pinterest應用程序）

Question

就像在Pinterest應用程序中一樣，當向下滾動/向上滾動時，我希望我的頂部導航欄向上/向下滑動並且在相同時間我的底部工具欄向下/向上滑動。

現在，我設法使用下面的代碼向上/向下滾動時隱藏和顯示頂部導航欄。我試圖弄清楚如何同時在底部的工具欄上做相反的事情，但我無法實現它的功能！

我是這種新的，所以任何建議將不勝感激！

的jQuery：

$(document).ready(function(){ 

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(); 
     } 
    } 
    previousScroll = currentScroll; 
}); }); 

Answer 1

基於結構你的jsfiddle提供：

--html

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

--css：

body { 
    height: 1000px; 
} 

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

#header { 
    top: -20px; 
    position: relative; 
} 

#header-wrap, #footer-wrap { 
    width: 100%; 
    position: fixed; 
    padding: 0px; 
    /*background-color: #e0e0e0;*/ 
} 

#header-wrap { 
    top: 0px; 
} 

#footer-wrap { 
    bottom: 0px; 
} 

--JS

$(function() { 
    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').slideUp("slow"); 
       $('#footer').slideDown("slow"); 
      } else { 
       $('#header').slideDown("slow"); 
       $('#footer').slideUp("slow"); 
      } 
     } 
     previousScroll = currentScroll; 
    }); 
});