这两天刚刚学习了jquery就想把平时做看到的一些相关效果用新的知识写写看。知识平时看着都懂，实际操作中问题才会层出不穷。
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
.result{
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>