Hola a todos, necesito una acción jQuery para activar cuando un usuario se desplaza más allá de ciertas ubicaciones en la página. ¿Es esto posible con jQuery? Miré .scroll en la API de jQuery y no creo que esto sea lo que necesito. Se dispara cada vez que el usuario se desplaza, pero necesito que se dispare justo cuando un usuario pasa por un área determinada.
Usa el evento jquery .scroll()
$(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // set to whatever you want it to be if(y_scroll_pos > scroll_pos_test) { //do stuff } });Los waypoints en jQuery deberían hacerlo: http://imakewebthings.github.com/jquery-waypoints/
$('#my-el').waypoint(function(direction) { console.log('Reached ' + this.element.id + ' from ' + direction + ' direction.'); });Documentación del complemento jQuery waypoints: http://imakewebthings.com/waypoints/guides/jquery-zepto/
Para activar cualquier acción solo una vez en una sola página, he modificado el fragmento de jondavid de la siguiente manera.
jQuery(document).ready(function($){ $triggered_times = 0; $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // set to whatever you want it to be if(y_scroll_pos > scroll_pos_test && $triggered_times == 0 ) { //do your stuff over here $triggered_times = 1; // to make sure the above action triggers only once } }); })Aquí puede consultar un ejemplo de fragmento de código de trabajo;
jQuery(document).ready(function($){ $triggered_times = 0; $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // set to whatever you want it to be if(y_scroll_pos > scroll_pos_test && $triggered_times == 0 ) { alert('This alert is triggered after you have scroll down to 150px') $triggered_times = 1; // to make sure the above action triggers only once } }); }) p { height: 1000px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <p>scroll down this block to get an alert</p> </body>