這兩天剛剛學習了jquery就想把平時做看到的一些相關效果用新的知識寫寫看。知識平時看着都懂，實際操作中問題才會層出不窮。
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
.result{
width: 100%;
height: 50px;
background: #ccc;
position: fixed;
top: -50px;
}
</style>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.slim.min.js"></script>
</head>
<body style="height:4500px;">
<div class="result"></div>
<script>
//出現問題： 1、每次scroll都使動畫反復觸發，解決這個問題使用動畫的 stop()，
// 這個方法主要是為了停止所有指定元素上運行的動畫
// 兩個參數,第一個參數刪除隊列動畫，第二參數是讓當前正在執行的動畫立即完成，並且
// 重設show和hide的原始延時，調用回調函數,示例：
// $("#div").stop(); 停止當前動畫，繼續下一個動畫
// $("#div").stop(true) 停止元素的所有的動畫
// $("#div").stop(false, true) 讓當前動畫直接到達末狀態，繼續下一個動畫
// $("#div").stop(true, true) 清楚所有動畫，讓當前動畫直接到達末尾狀態
// 到這一步能基本解決問題了，但是觀察效果的時候發現進入動畫的時候還是
// 有點卡頓的問題。主要原因在下面。
//
// 2、第二個問題也是因為scroll每次觸發會引起上百次的操作，為了優化操作，網友提示
// 使用節流閥，不然scroll每次都在觸發。節約資源，其中提供了
// https://segmentfault.com/a/1190000002764479 函數防抖與節流的優秀文章。
//
$(function(){
var fs = true;
$(window).scroll(function(event) {
if( $(window).scrollTop() > 50 ){
if(fs){
$(".result").stop().animate({
top: 0
},300);
fs = false;
}
}
else{
$(".result").stop().animate({
top: "-50px"
},300);
fs = true;
}
});
});
</script>
</body>
</html>