Foundation 5 - 固定Off Canvas標題在頁首的方法

Foundation 5新增的Off Canvas可以擬模側滑菜單的效果，但在性能較差的手機上會出現延遲的問題，因為它會將整個頁面以CSS transform的translate3d移動，其實大部分情況只需要顯示菜單，所以可以將Off Canvas和Top Bar整合，請看以下的實例：

CSS transform： http://www.w3schools.com/cssref/css3_pr_transform.asp
Foundation 5 Off Canvas文檔： http://foundation.zurb.com/docs/components/offcanvas.html

Js Fiddle示範： http://jsfiddle.net/indream/hSu4c/

1. 先將div.tab-bar加上top-bar class，並以div.fixed包住。

<div class="fixed">
 <nav class="tab-bar top-bar">
  <section class="left-small"> <a class="left-off-canvas-toggle menu-icon"><span></span></a></section>
  <section class="middle tab-bar-section">
   <h1 class="title">Foundation</h1>
  </section>
  <section class="right-small"></section>
 </nav>
</div>

2. 加入以下的CSS

/* 下移.top-bar擋住的文字 */
body {
  margin-top: 2.8125rem;
}
/* 修正被.exit-off-canvas擋住的菜單 */
.fixed, .left-off-canvas-menu {
    z-index: 1003;
}
.move-right .left-off-canvas-menu {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
}
.left-off-canvas-menu {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: -100%;
    /* 可以在此修改Off Canvas動畫的時間 */
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.move-right>.inner-wrap {
    -webkit-transform: none;
    transform: none;
}
.move-right a.exit-off-canvas {
    -webkit-transition: none;
    transition: none;
}

3. 頁面載入後執行以下的JS

$(document).foundation();
// 將Off Canvas設為頁面的高度，並在開啟時固定在頁面中央
$(".inner-wrap, .left-off-canvas-menu, .main-section").height($(window).height() - $(".fixed").height());