javascript - mismo - mostrar y ocultar div con jquery ejemplos

Evento desencadenante cuando el usuario se desplaza a un elemento específico-con jQuery

Question

Tengo un h1 que está muy abajo en una página ...

<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>

y quiero activar una alerta cuando el usuario se desplaza a h1 o lo tiene en la vista del navegador.

$(''#scroll-to'').scroll(function() {
     alert(''you have scrolled to the h1!'');
});

¿Cómo hago esto?

Answer 1

¡La biblioteca de Inview activó el evento y funciona bien con jquery 1.8 y superior! https://github.com/protonet/jquery.inview

$(''div'').on(''inview'', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
  } else {
    // element has gone out of viewport
  }
});

Lea esto https://remysharp.com/2009/01/26/element-in-view-event-plugin

Answer 2

Combinando esta pregunta con la mejor respuesta de la acción desencadenante de jQuery cuando un usuario se desplaza más allá de una determinada parte de la página

var element_position = $(''#scroll-to'').offset().top;

$(window).on(''scroll'', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {
        //do stuff
    }
});

ACTUALIZAR

He mejorado el código para que se dispare cuando el elemento está en la mitad de la pantalla en lugar de en la parte superior. También activará el código si el usuario toca la parte inferior de la pantalla y la función aún no se ha activado.

var element_position = $(''#scroll-to'').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $(''body'').height() - screen_height - 5;//-5 for a little bit of buffer

//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn''t triggered the function yet
$(window).on(''scroll'', function() {
    var y_scroll_pos = window.pageYOffset;

    var element_in_view = y_scroll_pos > activation_point;
    var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

    if(element_in_view || has_reached_bottom_of_page) {
        //Do something
    }
});

Answer 3

Creo que su mejor opción sería aprovechar una biblioteca existente que hace eso mismo:

http://imakewebthings.com/jquery-waypoints/

Puede agregar oyentes a sus elementos que se dispararán cuando su elemento llegue a la parte superior de la ventana gráfica:

$(''#scroll-to'').waypoint(function() {
 alert(''you have scrolled to the h1!'');
});

Para una increíble demostración de su uso:

http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/

Answer 4

Esto debería ser lo que necesitas.

Javascript:

$(window).scroll(function() {
    var hT = $(''#circle'').offset().top,
        hH = $(''#circle'').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    console.log((hT - wH), wS);
    if (wS > (hT + hH - wH)) {
        $(''.count'').each(function() {
            $(this).prop(''Counter'', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 900,
                easing: ''swing'',
                step: function(now) {
                    $(this).text(Math.ceil(now));
                }
            });
        }); {
            $(''.count'').removeClass(''count'').addClass(''counted'');
        };
    }
});

CSS:

#circle
{
    width: 100px;
    height: 100px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    float:left;
    margin:5px;
}
.count, .counted
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: green;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
   float:left;
   margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 15px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 20px solid green;
   border-bottom: 13px solid transparent;
}

HTML:

<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="circle"><span class="count">1234</span></div>

Compruebe este bootply: http://www.bootply.com/atin_agarwal2/cJBywxX5Qp

Answer 5

Puede calcular el offset del elemento y luego compararlo con el valor de scroll como:

$(window).scroll(function() {
   var hT = $(''#scroll-to'').offset().top,
       hH = $(''#scroll-to'').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
       console.log(''H1 on the view!'');
   }
});

Mira este Demo Fiddle

Demo actualizada no muestra ninguna alerta, sino FadeIn () el elemento

Código actualizado para verificar si el elemento está dentro de la ventana gráfica o no. Por lo tanto, esto funciona ya sea que esté desplazándose hacia arriba o hacia abajo agregando algunas reglas a la instrucción if:

   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       //Do something
   }

Demo Fiddle

Answer 6

Puede usar el https://remysharp.com/2009/01/26/element-in-view-event-plugin con el evento inview como este:

jQuery(''.your-class-here'').one(''inview'', function (event, visible) {
    if (visible == true) {
      //Enjoy !
    }
});

Enlace: https://remysharp.com/2009/01/26/element-in-view-event-plugin

Answer 7

Puede usar esto para todos los dispositivos,

$(document).on(''scroll'', function() {
    if( $(this).scrollTop() >= $(''#target_element'').position().top ){
        do_something();
    }
});

Answer 8

Si está utilizando una gran cantidad de funcionalidades basadas en la posición de desplazamiento, Scroll magic ( http://scrollmagic.io/ ) está construido completamente para este propósito.

Hace que sea fácil activar JS en función de cuándo el usuario llega a ciertos elementos cuando se desplaza. También se integra con el motor de animación GSAP ( https://greensock.com/ ), que es ideal para sitios web de desplazamiento de paralaje.

Answer 9

Solo una rápida modificación a la respuesta de DaniP, para cualquier persona que trate con elementos que a veces pueden extenderse más allá de los límites de la ventana gráfica del dispositivo.

Se agregó solo un ligero condicional: en el caso de los elementos que son más grandes que la ventana gráfica, el elemento se revelará una vez que la mitad superior haya llenado por completo la ventana gráfica.

function elementInView(el) {
  // The vertical distance between the top of the page and the top of the element.
  var elementOffset = $(el).offset().top;
  // The height of the element, including padding and borders.
  var elementOuterHeight = $(el).outerHeight();
  // Height of the window without margins, padding, borders.
  var windowHeight = $(window).height();
  // The vertical distance between the top of the page and the top of the viewport.
  var scrollOffset = $(this).scrollTop();

  if (elementOuterHeight < windowHeight) {
    // Element is smaller than viewport.
    if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) {
      // Element is completely inside viewport, reveal the element!
      return true;
    }
  } else {
    // Element is larger than the viewport, handle visibility differently.
    // Consider it visible as soon as it''s top half has filled the viewport.
    if (scrollOffset > elementOffset) {
      // The top of the viewport has touched the top of the element, reveal the element!
      return true;
    }
  }
  return false;
}