在開始介紹之前，我們先先看一下下面的效果，用 QQ 截的圖，效果很不清楚，但是能說明問題。

怎么實現(xiàn)這樣的效果呢？用得比較多的算是 jQuery 的 waypoints 插件了，其實不用 jQuery 插件，很簡單的一段 jQuery 代碼就可以實現(xiàn)這樣的效果，不過要結合 CSS3 過渡，IE9 以下的瀏覽器效果可能就差一點了。實現(xiàn)以上效果的關鍵代碼如下。

首先，用 jQuery 判斷網頁滾動，網頁滾動的高度大于 120 像素時，添加 “small” 類到 nav 上，其他情況下，移除這個類。這個和本站之前的文章給WordPress添加回到頂部功能有點類似，都是基于scrollTop來判斷的。

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 120) {
    $("nav").addClass("small");
  } else {
    $("nav").removeClass("small");
  }
});

然后，還需要 CSS 來配合，首先，頂部導航位置需要設為靜態(tài)，然后導航變化時，加上 CSS3 過渡效果。

nav {
  height:141px;
  background:#fff;
  border-bottom:1px solid #ccc;
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:10;
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  transition:all .3s
}

nav.small {
  height: 51px;
}

下拉網頁，下拉的高度超過 120 像素時，導航就會像上面的效果那樣自動縮小，非常簡單，效果也非常不錯。