jquery 滚动条 scroll 和 animate出现的问题总结

原文链接

出现问题：

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{

         if(!fs){

            $(".result").stop().animate({
                top: "-50px"
            },300);

            fs = true;
          }
        }
    });
 });