讓Sticky Header自動隱藏是一個一箭雙鵰的好辦法，一來可以在任何頁面任何地方都可以訪問到導航條，二來可以節省頁面空間。我的客戶Easy Shine就非常樂意在自己的網站上使用這個技術，這個技術同時也在我的網站上實現了（viewport小於768px時可以看到效果）。
|
1 2 3 |
<header class="header" role="banner"> <!-- ... --> </header> |
|
1 2 3 4 5 6 7 8 9 |
.header { width: 100%; height: 7.5em; position: fixed; z-index: 1000; top: 0; left: 0; } |
這裡有一些淺顯易懂的HTML/CSS程式碼，無論頁面滾動到何處，導航條都會固定在頁面頂部。現在，我們如何讓它自動隱藏？
自動隱藏導航條
「自動隱藏」意味著當使用者在往下滾動頁面時導航條將會消失，但當使用者有可能需要導航條的時候又能讓它出現：使用者已經滾動到頁面底部，或者開始向上滾動時。導航條的隱藏至少有兩種形式：互動式和簡單式。
互動式
互動式的意思是，導航條會直接地，或者立刻響應頁面滾動事件，這種形式或許會由於它操作起來的感覺，從使用者體驗看來是一個良好的小細節。不過它也有不好的一面：這種形式的本質決定了他必須要依賴於JavaScript，我們不能使用JS事件節流閥（在指定的時間週期內只呼叫某個函式一次）。基本上這就意味著每次滾動事件產生都要產生計算，並且會毫無意義的佔用CPU。幸運的是，大多數情況下這只是理論，實際上因為計算量實在太微不足道而通常不會遇到這種問題。
滾動事件產生時，JS演算法會計算並修改CSS中的top屬性。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//... 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'; } //... }); //... |
簡單式
這種形式，取決於JavaScript節流閥的週期設定，或許不會有太多“得到回應”的感覺。不管怎麼說，這種形式對CPU會比較友好，加之動畫是基於CSS來實現的，這意味著我們的想象力可以盡情發揮。
和之前互動式不同的是，這裡的JavaScript並不直接改變CSS的屬性，而是為元素插入或移除header--hidden這個CSS類
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//... 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中我們這樣定義：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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; } .header--hidden { -webkit-transform: translateY( -100% ); -ms-transform: translateY( -100% ); transform: translateY( -100% ); } |
導航條的額外的一些狀態
有些時候，尤其在主頁中時，在頁面頂部使用更大的導航條有助於獲取訪問者的注意，我們需要一個額外的CSS類來控制導航條高度：
|
1 2 3 4 |
.header--narrow { height: 5em; } |
然而這個新定義的CSS類是由JavaScript來控制如何使用的——在頁面開始滾動時新增，並在滾動到頁面頂部時移除。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// ... 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的兩種實現方式，儘管去研究去使用吧！