javascript 检测元素何时处于视图中

Posted 2021-05-04

  var $animation_element = $('.YOUR_CLASS');
  var $window = $(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);

    /*Se ci sono più elementi da controllare ciclare questa parte di codice*/
    var element_height = $animation_element.outerHeight();
    var element_top_position = $animation_element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    /* Elemento in viewport */
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      /* ...qui il codice*/
    } 
    /* Elemento non in viewport */
    else {
      /* ...qui il codice*/
    }
  }
})