如何製作一個吸頂式的選單列

一個好用的選單系統，可以幫助使用者快速找到所需的內容，如果你經常觀察網頁的趨勢，因該很容易發現許多網站開始將選單列常駐在頁面的頂部，而不會隨著頁面的捲動而消失。這樣的做法可以幫助使用者在切換頁面單元時，不用為了點選選單而去捲動頁面，算是一個很貼心的 UX 規劃。做法也有很多種，從純粹的 CSS 到 Javascript 都有，網路上也有很多現成的範例，下面我們以 On Scroll Header Effects 為例：

• On Scroll Header Effects
• 效果預覽
• 下載範例

第一步：建立導覽列

<header id="ha-header" class="ha-header ha-header-large">
<div class="ha-header-perspective">
<div class="ha-header-front">
<h1><span>Header Effects</span></h1>
<nav>
<a>‹ Previous Demo</a>
<a>Something</a>
<a>Anything</a>
<a>Back to the article</a>
</nav>
</div>
<div class="ha-header-bottom">
<nav>
<a>Dalliance</a>
<a>Inglenook</a>
<a>Lagniappe</a>
<a>Mellifluous</a>
<a>Erstwhile</a>
<a>Wafture</a>
<a>Serendipity</a>
<a>Love</a>
</nav>
</div>
</div>
</header>

第二步：建立切換點

這步驟是精華，每一個 Section 都是一個切換點，第一個 Section 通常不會下任何參數。但從第二個 Section 後，每一個都會加 data-animate-up (往上捲動) 和 data-animate-down (往下捲動) 的效果參數。

<section>...</section>
<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-rotateBack">...</section>

可設置的參數如下：

• ha-header-small：縮小 header
• ha-header-large：放大 header
• ha-header-hide：隱藏 header
• ha-header-show：秀出預設的 header
• ha-header-subshow：秀出 header 的子選單
• ha-header-shrink 和 ha-header-rotateBack：成為獨立區塊
• ha-header-rotate：秀出獨立區塊的子選單
• ha-header-color：變成半透明區塊
• ha-header-box：變成手機的導覽 icon
• ha-header-fullscreen：變成全螢幕
• ha-header-subfullscreen：把螢幕切為上下兩部分，且半透明

上述這些效果都是預設好的，如果你要調整它的效果，也可以到 component.css 裡尋找相對應的 class 調整即可。

第三步：載入 css

<link rel="stylesheet" type="text/css" href="HeaderEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="HeaderEffects/css/component.css" />

第四步：載入 Javascript & jQuery

請在 </body> 之前，放入下面的 code

<script src="HeaderEffects/js/jquery.min.js"></script>
  <script src="HeaderEffects/js/waypoints.min.js"></script>
  <script>
  var $head = $( '#ha-header' );
  $( '.ha-waypoint' ).each( function(i) {
  var $el = $( this ),
  animClassDown = $el.data( 'animateDown' ),
  animClassUp = $el.data( 'animateUp' );
$el.waypoint( function( direction ) {
  if( direction === 'down' && animClassDown ) {
  $head.attr('class', 'ha-header ' + animClassDown);
  }
  else if( direction === 'up' && animClassUp ){
  $head.attr('class', 'ha-header ' + animClassUp);
  }
  }, { offset: '100%' } );
  } );
  </script>

在 </head> 之前加入下面的 code 即完成。

<script src="HeaderEffects/js/modernizr.custom.js"></script>