WordPress 主题中的航点仅在打开开发人员工具时有效答案

【问题标题】：Waypoints in WordPress theme only works when Developer's tool is openedWordPress 主题中的航点仅在打开开发人员工具时有效
【发布时间】：2020-07-29 20:50:38
【问题描述】：

我正在尝试在我的 WordPress 主题中包含 Waypoints (http://imakewebthings.com/waypoints/)，而不使用他们的插件（高级插件）。所以，我下载了必要的文件并将它们加入队列：

    // Waypoints
    wp_enqueue_script( 'waypoints-main', get_template_directory_uri() . '/inc/waypoint/jquery.waypoints.min.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'waypoints-animations', get_template_directory_uri() . '/js/waypoints-animations.js', array( 'jquery', 'waypoints-main' ), false, true );

这是我的 waypoints-animations.js 文件中的内容：

(function($){

var $div1 = $('.new-arrivals');

$div1.waypoint(function(direction){
    if (direction === 'down'){
        $div1.addClass('animate');
    } else{
        $div1.removeClass('animate');
    }
}, 
    {offset: '60%'}
);
})(window.jQuery)

我的 CSS 是这样说的：

.new-arrivals {
    clear: both;
    padding: 40px 0 0 0;
    margin-bottom: -40px;
    transition: 1s;
    opacity: 0;
}

.animate {
    opacity: 1;
}

我的控制台没有错误。但我注意到页面正在加载，方向设置为“向下”，导致默认显示具有类 .new-arrivals 的 div（不透明度 1）。我希望相反的事情发生。曾经我设法使代码起作用，但这仅在打开开发人员工具时发生。我不明白为什么会这样…… 你能帮帮我吗？

【问题讨论】：

标签： wordpress jquery-waypoints

【解决方案1】：

刚刚设法找到了错误。我需要添加滚动事件。像这样：

(function ($) {
    var $div1 = $('.new-arrivals');
    $(window).on('scroll', function () {
        $div1.waypoint(function (direction) {
            if (direction === 'down') {
                $div1.addClass('animate');
            } else {
                $div1.removeClass('animate');
            }
        }, {
            offset: '60%'
        });
    });
})(window.jQuery)

【讨论】：