如何使用jQuery Waypoints为多个视口可见元素添加相同类

你的原有代码核心问题是 jQuery 选择器不支持直接传入选择器数组，需要先将数组内的多个选择器拼接为逗号分隔的单个选择器字符串，即可实现多元素批量绑定效果。

可直接运行的实现代码 #

$(function() {
    // 所有需要绑定入场动画的元素选择器
    const animateSelectors = [
        'main.home section.blocks .text', 
        'main.page ul li',
        'main.contact .header div'
        // 可继续添加其他选择器
    ];
    
    // 拼接选择器后批量绑定waypoint
    $(animateSelectors.join(',')).waypoint(function() {
        $(this.element).addClass('animate');
        // 可选：触发一次后销毁当前waypoint，避免重复触发
        this.destroy();
    }, { 
        offset: '100%'
    });
});

注意事项 #

• 需先引入 jQuery 库，再引入 jQuery 版本的 Waypoints 插件，否则功能无法正常生效
• 当前offset: '100%'的含义是元素顶部接触到视口底部时触发动画，你可以根据需求调整数值：比如设置为offset: '75%'，代表元素顶部进入到视口高度75%的位置（即元素已经进入视口25%）时触发
• 如果你的动画需要每次元素进入视口都重新触发，删除回调中的this.destroy()即可

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