Jquery 根据屏幕大小禁用动画

我正在使用waypoints.js制作动画，我已经完成了以下工作

$(document).ready(function(){
  "use strict"; 
    $('.slogan').waypoint(function(direction) {             
        $('.onelogo').toggleClass('hide', direction === 'down');
    });
});

但是上面提到的唯一问题是动画仍然在手机上播放，所以在阅读之后，我尝试实现以下内容

$(document).ready(function(){
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950){
            var waypoints = document.querySelectorAll('.slogan');
            for (var i = waypoints.length - 1; i >= 0; i--) {
                var waypoint = new Waypoint({
                    element: waypoints[i],
                    handler: function(direction) {
                        this.element.classList.toggle('.hide');
                    },
                    offset: '60%',
                });
            }
        } else {
            // less then 950 px.
            if ($(".onelogo").hasClass(".hide")) {
                $(".onelogo").removeClass(".hide"); 
            }
        }
    });
});

但是这样做，动画根本不会播放

html

---

我不熟悉航路点，但您可以尝试将逻辑封装在函数中，然后在

$（文档）上调用它。准备好
和
$（窗口）。调整大小
：

function toggleAnimation(){
    width=$(window).width();

    if (width > 950){
    var waypoints = document.querySelectorAll('.slogan');
        for (var i = waypoints.length - 1; i >= 0; i--) {
            var waypoint = new Waypoint({
                element: waypoints[i],
                handler: function(direction) {
                    this.element.classList.toggle('.hide');
                },
                offset: '60%',
            });
         }
    } else {
       // less then 950 px.
       if ($(".onelogo").hasClass(".hide")) {
           $(".onelogo").removeClass(".hide"); 
       }

    }
}

打电话给

$(document).ready(function(){
    toggleAnimation();

    $(window).resize(function(){
        toggleAnimation();
    }); 
})

当屏幕大小小于950px时，是否要停止动画？
我不知道，但我想你可以试试这个：

var waypoints = null;
$(document).ready(function() {
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950) {
            ...
        } else if (waypoints != null) {
            waypoints.disable() //or waypoints.destroy() if new instance
        }
    });
}); 

最简单的方法是在
$（document）.ready（）
上添加航路点，并根据窗口大小调用航路点/

<script>
var waypoint;
function handleWayPoint() {
    var $width = $(window).width();
    console.log($width);
    if($width > 950) {
      waypoint[0].enable();
    }
    else {
        waypoint[0].disable();
    }
  }

$(document).ready(function(){
  "use strict";
   waypoint= $('.slogan').waypoint(function(direction) {             
         $('.onelogo').toggleClass('hide', direction === 'down');
   });
   handleWayPoint();

   $(window).resize(function() {
      handleWayPoint();
   });
});
</script>


var航路点；
函数handleWayPoint（）{
var$width=$（window.width（）；
console.log（$width）；
如果（$width>950）{
航路点[0]。启用（）；
}
否则{
航路点[0]。禁用（）；
}
}
$（文档）.ready（函数（）{
“严格使用”；
航路点=$（'.lamposon'）。航路点（功能（方向）{
$（'.onelogo'）.toggleClass（'hide'，direction=='down'）；
});
handleWayPoint（）；
$（窗口）。调整大小（函数（）{
handleWayPoint（）；
});
});

除了我在评论中提到的错误之外，其他代码的主要问题是这一行：
this.element.classList.toggle（'.hide'）代码>在JavaScript中的这个< /代码>与其他语言（java，C++）的工作方式完全不同。一般来说，JavaScript中的
这个
被设置为点运算符左侧的对象（尽管也有例外）

由于您的功能是“调整大小”，因此首次加载页面时不会发生任何事情。我不熟悉waypoints.js，所以我不能给出太多具体的建议，但首先要尝试的是在函数的末尾，在resize函数本身之后添加一个函数来触发resize事件。只需在
$（文档）中执行
$（窗口）。resize（）
。准备好
触发您刚才在页面加载时执行的功能。您也可以发布html/css吗？可能是小提琴？您上面的代码在航路点构造函数中有语法错误。删除偏移量属性后的逗号。另外removeClass和toggle使用类名（“隐藏”），而不是类选择器（“名称”），我知道如何使用媒体查询，但媒体查询无法满足我的需要隐藏类不隐藏它向上滚动并隐藏它根本不显示它那么你能发布你的html/css吗？
var waypoints = null;
$(document).ready(function() {
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950) {
            ...
        } else if (waypoints != null) {
            waypoints.disable() //or waypoints.destroy() if new instance
        }
    });
}); 

<script>
var waypoint;
function handleWayPoint() {
    var $width = $(window).width();
    console.log($width);
    if($width > 950) {
      waypoint[0].enable();
    }
    else {
        waypoint[0].disable();
    }
  }

$(document).ready(function(){
  "use strict";
   waypoint= $('.slogan').waypoint(function(direction) {             
         $('.onelogo').toggleClass('hide', direction === 'down');
   });
   handleWayPoint();

   $(window).resize(function() {
      handleWayPoint();
   });
});
</script>