jquery - WordPress上的divi主题的航路点如何工作？

Divi theme实现waypoints，任何人都知道它是如何工作的，以及如何使用它们？例如，这个类允许动画在某个点上et-waypoint，但我需要知道如何操作事件。

最佳答案

它是这样工作的，当您将et-waypoint类分配给任何divi模块时，它将被用divi JS编写的jQuery自动获取，

<script>
(function($) {
    var $animation_elements = $('.et-waypoint'),
        $window = $(window);

    function check_if_in_view() {
        var window_height = $window.height(),
            window_top_position = $window.scrollTop(),
            window_bottom_position = (window_top_position + window_height);

        $animation_elements.each(function() {
            var $element = $(this),
                element_height = $element.outerHeight(),
                element_top_position = $element.offset().top,
                element_bottom_position = (element_top_position + element_height);

            //check to see if this element is within viewport
            if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                $element.addClass('et-animated');
            } else {
                $element.removeClass('et-animated');
            }
        });
    }

    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

在这种情况下，$animation_elements抓取et航路点并在窗口滚动上调用check_if_in_view。

关于jquery - WordPress上的divi主题的航路点如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44690373/