Question

我在我们网站上的某些图片元素上进行了转换，除了向上滚动再次触发的网站外，它们还可以正常工作。这些只应在您向下滚动网站或窗口调整大小时触发。

当前的JS：

var $animation_elements = jQuery('.animation-element');
var $window = jQuery(window);

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

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

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

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

除非窗口调整大小，否则有没有办法防止此触发两次或仅一次？

Answer 1

您是否尝试过仅触发调整大小事件？

$(document).ready(function(){
var $animation_elements = jQuery('.animation-element');
var $window = jQuery(window);
//Initialize classes
jQuery.each($animation_elements, function(index, element) {
  jQuery(element).addClass('in-view');
});
function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

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

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

$window.on('resize', check_if_in_view);
check_if_in_view();
});

除非窗口调整大小

1 个答案: