2

Cómo hacer que cuando un elemento (una imagen) se haga visible para el usuario se realice una acción. La idea es enviar un evento a GA cuando el usuario haga scroll hasta una parte de la página en la que hay un bloque de información que me interesa.

La verdad es que sé muy poquito de todo esto. Hasta ahora sólo me he visto en la tesitura de enviar eventos a Google Analytics, por ejemplo, de la siguiente forma:

$(".btn-u-loquesea").click(function() { GAeventoquesea; });

Lo que pasa es que ahora busco enviar eventos cuando aparezca una imagen en el navegador...

Me gustaría que el evento se enviase al llegar al siguiente div

<div class="headline-center-v2 headline-center-v2-dark margin-bottom-60 margin-top-60"><h2>OTHER SERVICES</h2><span class="bordered-icon"><i class="fa fa-th-large"></i></span></div>
3
  • Hola Sergio y bienvenido. ¿Qué has intentado? ¿Puedes compartir el código (aunque no funcione) que tengas? Commented el 8 sept. 2016 a las 9:40
  • La verdad es que sé muy poquito de todo esto. Hasta ahora sólo me he visto en la tesitura de enviar eventos a Google Analytics, por ejemplo, de la siguiente forma: $(".btn-u-loquesea").click(function() { GAeventoquesea; }); Lo que pasa es que ahora busco enviar eventos cuando aparezca una imagen en el navegador... Commented el 8 sept. 2016 a las 9:41
  • 1
    Sergio, edita tu pregunta para añadir la información que comentas :). Comparte tu código html (sólo la parte necesaria), javascript y css para poder reproducir tu situación! Commented el 8 sept. 2016 a las 9:44

1 respuesta 1

2

Puedes controlar la posición de tu elemento en el evento scroll.

jQuery(function($) {

  // Obtenemos los elementos que quieres controlar por medio de su clase
  var $controlables = $('.loquesea');

  // Cuando hacemos scroll
  var doScroll = function() {

    // Calculamos el offset actual
    var offset = $(window).scrollTop() + $(window).height();

    // En el caso de no existir ningún elemento no necesitarás
    // comprobar nada así que dejamos de escuchar el evento de scroll
    if ($controlables.size() == 0) {
      $(window).off('scroll', doScroll);
    }

    // Aquí está la chicha
    $controlables.each(function(i) {
       var $controlable = $(this);
       // Si el elemento es visible
       if (($controlable.offset().top + $controlable.height() - 20) < offset) {
        // Ejecutas el código que necesites
       }
    });

  };

  $(window).on('scroll', doScroll);
  $(window).trigger('scroll');

});

NOTA: No he probado el código por lo que es posible que necesite algún ajuste para que funcione correctamente.

11
  • Gracias! Aunque al probarlo me dice "$controlables is not defined" Commented el 8 sept. 2016 a las 11:01
  • @Sergioussss he metido la pata con los nombres. He editado el ejemplo. Espero que así te funcione.
    – eledgaar
    Commented el 8 sept. 2016 a las 11:08
  • ahora me da el error "jQuery is not defined". Muchas gracias por las molestias @eledgaar Commented el 8 sept. 2016 a las 12:31
  • @Sergioussss dependiendo de como lo estés utilizando no necesitas la función jQuery(function($) { ... }.
    – eledgaar
    Commented el 8 sept. 2016 a las 12:36
  • Funciona perfecto @eledgaar Muchísimas gracias. Cómo ves, no tengo mucha idea aún de estas cosas. :) Commented el 8 sept. 2016 a las 12:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.