自從上一次看過簡書的導航欄隨上下滾動所展現出來的切換內容的效果，和在慕課專欄看到的頭部導航欄隨上下滾動而隱藏/展現的特效，就一直念念不忘。
趁今晚無事，不如來把兩種效果都實現一下，以此慰藉自己這幾天“受傷的心靈”。。。
先來看下兩種效果（第二種不好截圖）：
和
OK，話不多說，咱們上代碼：
先來看簡書的特效製作：
筆者以爲，頭部導航欄的“大框架”固定位置、寬高，然後在其子元素設置兩個不同內容的“導航欄”，隨着滾動，去判斷是向上還是向下，根據不同情況爲兩個“子導航欄”增加或者刪除“類”！（通過類名的設置，這樣做效率上相對高一些）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 導航欄框架樣式 */
.navigation{
width: 100%;
height: 50px;
background-color: #d0f079;
position: fixed;
left:0;
top: 0;
text-align: center;
overflow: hidden;
z-index: 9999;
}
.navigation .navigation1,.navigation2{
width: 100%;
height: 50px;
margin-bottom: 10px;
transition: transform .5s;
}
.navigation1{
position: absolute;
top: 0;
}
.navigation2{
position: absolute;
top: 60px;
}
/* 隱藏效果 */
.hide{
transform: translateY(-60px);
}
/* 內容欄樣式 */
.content{
width: 80%;
height: 500px;
margin: 60px auto;
background-color: #41bcff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="navigation">
<div class="navigation1">導航菜單欄1</div>
<div class="navigation2">導航菜單欄2</div>
</div>
<div class="content">內容</div>
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
//頁面初始化的時候，獲取滾動條的高度（上次高度）
var start_height = $(document).scrollTop();
//獲取導航欄的高度(包含 padding 和 border)
var navigation_height = $('.navigation1').outerHeight();
$(window).scroll(function() {
//觸發滾動事件後，滾動條的高度（本次高度）
var end_height = $(document).scrollTop();
//觸發後的高度 與 元素的高度對比
if (end_height > navigation_height){
$('.navigation1').addClass('hide');
$('.navigation2').addClass('hide');
}else {
$('.navigation1').removeClass('hide');
$('.navigation2').removeClass('hide');
}
//觸發後的高度 與 上次觸發後的高度 比較
if (end_height < start_height){
$('.navigation1').removeClass('hide');
$('.navigation2').removeClass('hide');
}
//再次獲取滾動條的高度，用於下次觸發事件後的對比
start_height = $(document).scrollTop();
});
});
</script>
</body>
</html>
再來看下慕課的樣式是怎樣做的：
大體上和上面一樣，但是它只有一個“導航欄”，也是隨着滾動，去判斷是向上還是向下，根據不同情況爲“導航欄”增加或者刪除“類”！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 導航欄樣式 */
.navigation{
width: 100%;
height: 50px;
background-color: #d0f079;
position: fixed;
left:0;
top: 0;
text-align: center;
transition: top 0.5s;
}
/* 隱藏效果 */
.hide{
top: -60px;
}
/* 內容欄樣式 */
.content{
width: 80%;
height: 5000px;
margin: 60px auto;
background-color: #41bcff;
text-align: center;
line-height: 500px;
}
</style>
</head>
<body>
<div class="navigation">導航菜單欄</div>
<div class="content">內容</div>
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
//頁面初始化的時候，獲取滾動條的高度（上次高度）
var start_height = $(document).scrollTop();
//獲取導航欄的高度(包含 padding 和 border)
var navigation_height = $('.navigation').outerHeight();
$(window).scroll(function() {
//觸發滾動事件後，滾動條的高度（本次高度）
var end_height = $(document).scrollTop();
//觸發後的高度 與 元素的高度對比
if (end_height > navigation_height){
$('.navigation').addClass('hide');
}else {
$('.navigation').removeClass('hide');
}
//觸發後的高度 與 上次觸發後的高度
if (end_height < start_height){
$('.navigation').removeClass('hide');
}
//再次獲取滾動條的高度，用於下次觸發事件後的對比
start_height = $(document).scrollTop();
});
});
</script>
</body>
</html>
注意兩者的區別：第一個因爲要切換不同內容，所以其動畫特效對應於“transform”；而第二個直接操縱顯示/隱藏，故而其對應的是“top”。
（若是第一個也用了top，那豈不是一往上滾動，兩個就都往上面隱藏掉了。。。）