jquery根据滚动距离执行css动画函数，往下滚动只执行一次动画，往上滚动不执行动画怎么回事

Question

代码

   $(document).scroll(function(){
                //获取滚动条滚动的距离
                var scrollH=$(document).scrollTop();
                if(scrollH < 10){
                    $(".mydiv").addClass("animatediv");
                }else if( 10 < scrollH < 20){
                    $(".mydiv").removeClass("animatediv").addClass("noaniamte");

                }else{
                    $(".mydiv").addClass("animatediv");
                }
            })

css代码：
.mydiv{
width: 300px;
height: 200px;
background: #000;
text-align: center;
opacity: 0.2;

    }
    .animatediv{
        margin-left: 500px;
        transition: all 2s;
        -webkit-transition:all 2s ease;
    }
    .noaniamte{
        margin-left: 0;
        transition: all 2s;
        -webkit-transition:all 2s ease;
    }

HTML

     <div style="width:1000px; height: 2000px;">
        <div class="mydiv"></div>
        <div class="mydiv"></div>
        <div class="mydiv"></div>
        <div class="mydiv"></div>
        <div class="mydiv"></div>
    </div>

这难道是浏览器滚动机制的原因吗？有遇到过这样的问题吗？

Answer 1

这个是因为往上滚动的时候这个属性noaniamte一直没有去掉，每次判断结束不论什么情况都先把noaniamte这个属性去掉就没问题了，我稍微修改了一下
if(scrollH < 200){
$(".mydiv").removeClass("noaniamte").addClass("animatediv");
}else if( 200 < scrollH < 400){
$(".mydiv").removeClass("animatediv").addClass("noaniamte");

                        }else{
                                $(".mydiv").removeClass("noaniamte").addClass("animatediv");
                        }