如何基于屏幕尺寸禁用waypoints.js动画？

我来帮你搞定这个基于屏幕尺寸禁用waypoints动画的需求，下面是完整的可运行解决方案，还附带了关键细节的说明：

$(document).ready(function(){ 
    "use strict";

    // 封装统一处理Waypoint的函数，复用初始化和窗口 resize 逻辑
    function handleWaypoints() {
        var screenWidth = $(window).width();
        
        // 先销毁已绑定的Waypoint，避免重复绑定导致动画多次触发
        $('.slogan').waypoint('destroy');

        if (screenWidth > 950) {
            // 仅在大屏（>950px）下创建Waypoint监听
            $('.slogan').waypoint(function(direction) {
                $('.onelogo').toggleClass('hide', direction === 'down');
            }, {
                // 可选：调整触发时机，这里设置为元素底部进入视口时触发
                // 你可以根据需求改成 'top-in-view' 或具体百分比，比如 '50%'
                offset: 'bottom-in-view'
            });
        } else {
            // 小屏模式下重置元素状态，避免大屏触发的类残留导致显示异常
            $('.onelogo').removeClass('hide');
        }
    }

    // 页面加载完成后立即执行一次初始化
    handleWaypoints();

    // 窗口大小变化时执行，添加防抖避免频繁触发影响性能
    var resizeDebounceTimer;
    $(window).resize(function() {
        clearTimeout(resizeDebounceTimer);
        // 延迟250ms执行，等待窗口大小稳定后再处理
        resizeDebounceTimer = setTimeout(handleWaypoints, 250);
    });
});

关键细节说明： #

• 复用与销毁机制：封装handleWaypoints函数统一处理逻辑，每次调用前先销毁已存在的Waypoint，防止重复绑定导致动画多次触发的问题。
• 小屏状态重置：在小屏模式下主动移除hide类，避免用户先在大屏触发动画后缩小窗口，元素仍保持隐藏的异常情况。
• 防抖优化：窗口resize时添加防抖（延迟执行），避免拖动窗口边框时频繁触发函数，提升页面性能。
• 触发时机调整：你可以根据实际需求修改offset参数，比如设置为'50%'表示元素垂直中心进入视口时触发动画，Waypoints支持多种偏移值格式。

额外注意： #

如果你的Waypoints是原生JS版本（而非jQuery版本），销毁方式需要调整为保存Waypoint实例后调用destroy()方法，示例如下：

// 原生JS版本的销毁逻辑
let sloganWaypoint;
function handleWaypoints() {
    const screenWidth = window.innerWidth;
    if (sloganWaypoint) {
        sloganWaypoint.destroy();
    }
    if (screenWidth > 950) {
        sloganWaypoint = new Waypoint({
            element: document.querySelector('.slogan'),
            handler: function(direction) {
                document.querySelector('.onelogo').classList.toggle('hide', direction === 'down');
            },
            offset: 'bottom-in-view'
        });
    } else {
        document.querySelector('.onelogo').classList.remove('hide');
    }
}

内容的提问来源于stack exchange，提问作者user7186420