Enrico of FrontEndContento
2/1/2018 - 10:03 AM

Detects when the element is in view

Questo script serve per fare il detect di un elemento quando entra nella viewport.

Utile ad esempio quando si vuole attivare un'animazione su un elemento durante lo scroll della pagina.

detect.js
content_copyfile_download
  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*/
    }
  }
})