知識星球英文：osvaldas.info
譯者：伯樂線上 – 吳鵬煜
網址：http://web.jobbole.com/82763/
點選“閱讀原文”可檢視本文網頁版
讓Sticky Header自動隱藏是一個一箭雙雕的好辦法，一來可以在任何頁面任何地方都可以訪問到導航條，二來可以節省頁面空間。我的客戶Easy Shine就非常樂意在自己的網站上使用這個技術，這個技術同時也在我的網站上實現了（viewport小於768px時可以看到效果）。
使導航條固定
.essay-header
{
width: 100%;
height: 7.5em;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
}
這裡有一些淺顯易懂的HTML/CSS程式碼，無論頁面滾動到何處，導航條都會固定在頁面頂部。現在，我們如何讓它自動隱藏？
自動隱藏導航條
「自動隱藏」意味著當使用者在往下滾動頁面時導航條將會消失，但當使用者有可能需要導航條的時候又能讓它出現：使用者已經滾動到頁面底部，或者開始向上滾動時。導航條的隱藏至少有兩種形式：互動式和簡單式。
互動式
互動式影片演示:http://player.vimeo.com/video/116655295?title=0&byline;=0&portrait;=0
互動式的意思是，導航條會直接地，或者立刻響應頁面滾動事件，這種形式或許會由於它操作起來的感覺，從使用者體驗看來是一個良好的小細節。不過它也有不好的一面：這種形式的本質決定了他必須要依賴於JavaScript，我們不能使用JS事件節流閥（在指定的時間週期內只呼叫某個函式一次）。基本上這就意味著每次滾動事件產生都要產生計算，並且會毫無意義的佔用CPU。幸運的是，大多數情況下這隻是理論，實際上因為計算量實在太微不足道而通常不會遇到這種問題。
滾動事件產生時，JS演演算法會計算並修改CSS中的top屬性。
//…
window.addEventListener( ‘scroll’, function()
{
//…
if( wScrollCurrent <= 0 ) // 滾動到頁面頂部; 元素保持在頁面頂部
element.style.top = ‘0px’;
else if( wScrollDiff > 0 ) // 向上滾動事件; 元素插入頁面
element.style.top = ( elTop > 0 ? 0 : elTop ) + ‘px’;
else if( wScrollDiff < 0 ) // 向下滾動事件
{
if( wScrollCurrent + wHeight >= dHeight – elHeight ) // 滾動到頁面底部; 元素插入頁面
element.style.top = ( ( elTop = wScrollCurrent + wHeight – dHeight ) < 0 ? elTop : 0 ) + ‘px’;
else // 向下滾動事件; 元素消失
element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + ‘px’;
}
//…
});
//…
簡單式
簡單式影片演示:http://player.vimeo.com/video/116655294?title=0&byline;=0&portrait;=0
這種形式，取決於JavaScript節流閥的週期設定，或許不會有太多“得到回應”的感覺。不管怎麼說，這種形式對CPU會比較友好，加之動畫是基於CSS來實現的，這意味著我們的想象力可以盡情發揮。
和之前互動式不同的是，這裡的JavaScript並不直接改變CSS的屬性，而是為元素插入或移除essay-header–hidden這個CSS類
//…
window.addEventListener( ‘scroll’, throttle( throttleTimeout, function()
{
//…
if( wScrollCurrent <= 0 ) // 滾動到頁面頂部; 元素保持在頁面頂部
removeElementClass( element, elClassHidden );
else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // 向上滾動事件; 元素插入頁面
removeElementClass( element, elClassHidden );
else if( wScrollDiff < 0 ) // 向下滾動事件
{
if( wScrollCurrent + wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // 滾動到頁面底部; 元素插入頁面
removeElementClass( element, elClassHidden );
else // 向下滾動事件; 元素消失
addElementClass( element, elClassHidden );
}
//…
}));
//…
在CSS中我們這樣定義：
.essay-header
{
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
.essay-header–hidden
{
-webkit-transform: translateY( -100% );
-ms-transform: translateY( -100% );
transform: translateY( -100% );
}
導航條的額外的一些狀態
影片演示：http://player.vimeo.com/video/116655292?title=0&byline;=0&portrait;=0
有些時候，尤其在主頁中時，在頁面頂部使用更大的導航條有助於獲取訪問者的註意，我們需要一個額外的CSS類來控制導航條高度：
.essay-header–narrow
{
height: 5em;
}
然而這個新定義的CSS類是由JavaScript來控制如何使用的——在頁面開始滾動時新增，併在滾動到頁面頂部時移除。
// …
window.addEventListener( ‘scroll’, throttle( throttleTimeout, function()
{
// …
if( wScrollCurrent > elNarrowOffset ) // toggles “narrow” classname
{
if( !hasElementClass( element, elClassNarrow ) )
addElementClass( element, elClassNarrow );
}
else removeElementClass( element, elClassNarrow );
// …
}));
// …
示範
這個Demo的原始碼中包括了純JavaScript（相容IE9+）和依賴於jQuery的兩種實現方式，儘管去研究去使用吧！
Demo地址：http://osvaldas.info/examples/auto-hide-sticky-essay-header/