顯示在滾動浮動導航欄

Question

我使用BlogSpot的，我想正是實現這種浮動導航欄：

http://apairandasparediy.com/

正如你可以看到，當您滾動，浮動導航欄顯示爲滑落。

我所知道的是做一個導航欄：

<div id="floating-nav-content"> 
    <div class="floating-nav"> 
     <ul id="menu-floating-menu" class="menu"> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     </ul> 
    </div> 
</div> 

但jQuery的其餘部分或JavaScript的東西仍然是未知的我。我也搜索，但他們沒有確切地教我想要什麼。

我只是新來的jQuery，我仍然不知道如何實現這一點。

非常感謝您的幫助。

Answer 1

這應該做你想做的。 （假設您已經包含jQuery庫）

<script type="text/javascript"> 
     $(document).scroll(function() { 
      if ($(this).scrollTop() == 0) { 
       $("#floating-nav-content").slideUp(400); 
      } else { 
       $("#floating-nav-content").slideDown(600); 
      } 

     }); 
    </script> 

CSS也很重要，因爲這會將導航欄放置在頁面頂部的固定位置。

<style type="text/css"> 
     html, body { 
      margin: 0; 
      padding: 0; 
     } 

     #floating-nav-content { 
      top: 0; 
      width: 100%; 
      height: 20px; 
      background-color: #000; 
      position: fixed; 
      display: none; 
      color: #FFF; 
      padding: 5px; 
     } 
    </style> 

而且當然HTML。 我把所有的上面和下面都放在了body標籤中。

<div id="floating-nav-content"> 
     Content 
    </div>