为什么在我的网站上添加jQuery动画会使CSS媒体查询不起作用？

Question

我最近实现了这个jQuery动画脚本：

$(window).load(function() {
    if (window.innerWidth > 700){
        $(window).scroll(function() {
            $('#animate').each(function(){
            var imagePos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
                if (imagePos < topOfWindow+800) {
                    $(this).addClass("expandUp");
                }
            });
        });
        $(window).scroll(function() {
            $('#animate1').each(function(){
            var imagePos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
                if (imagePos < topOfWindow+800) {
                    $(this).addClass("expandUp");
                }
            });
        });
        $(window).scroll(function() {
            $('#animate2').each(function(){
            var imagePos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
                if (imagePos < topOfWindow+800) {
                    $(this).addClass("expandUp");
                }
            });
        });
    }   
});

现在，当我加载页面时，动画可以正常工作，但我的媒体查询却没有。 jQuery解雇了我从这里获得的CSS：Animations

有谁可以解释为什么这个脚本会阻止我的媒体查询完全工作？

我的媒体查询无效的示例：

@media screen and (max-width:568px){

    .resource {
        width: 100%;
        margin-right: 0;
        min-height: 0;
    }

    #skill-info .fa {
        font-size: 50px;
    }

    .navbar-brand {
        position: absolute;
        margin-left: -115px;
        left: 50%;
        display: block;
    }

    h1{
        color: orange;
    }
}