Hola a todos, necesito una acción de jQuery para disparar cuando el usuario se desplaza últimos ciertas ubicaciones en la página. ¿Es esto posible con jQuery? He visto .scroll en la API jQuery y no creo que esto sea lo que necesito. Dispara cada vez que el usuario se desplaza, pero necesito que se dispare solo cuando un usuario pasa un área determinada.acción del disparador jQuery cuando el usuario se desplaza más allá de una cierta parte de la página
Uso del .scroll evento jQuery()
$(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
}
});
waypoints en jQuery deben hacerlo http://imakewebthings.github.com/jquery-waypoints/
Acabo de utilizar waypoints.js en una aplicación de desplazamiento de página única parallax. funciona excelente Un consejo que le puedo dar es usar enlaces para waypoints. Establecer la visibilidad en oculto. Puede usar el posicionamiento absoluto para establecer la altura del punto de referencia. Screen 1-1. – mbokil
Para disparar cualquier acción sólo una vez en una sola página de Jondavid He modificados fragmento como siguiendo.
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 ver ejemplos de fragmentos de código de trabajo;
jQuery(document).ready(function($){
\t \t $triggered_times = 0;
\t \t $(window).on('scroll', function() {
\t \t \t \t var y_scroll_pos = window.pageYOffset;
\t \t \t \t var scroll_pos_test = 150; // set to whatever you want it to be
\t \t \t \t if(y_scroll_pos > scroll_pos_test && $triggered_times == 0) {
\t \t \t \t \t alert('This alert is triggered when y_scroll_pos = 150')
\t \t \t \t \t $triggered_times = 1; // to make sure the above action triggers only once
\t \t \t \t }
\t \t });
\t })p {
height: 1000px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>scroll this block to get the result</p>
</body>¿por qué hay un símbolo '$' en la función 'document.ready'? Si digo que funciona o si no funciona. ¿Razón? @Mursaleen – Rehan
en realidad a veces '$' no se define como en el caso de WordPress, pero 'jQuery' se define allí. Así que aquí al colocarlo en 'function ($) {...}' significa '$ = jQuery'. Es por eso que si elimina el signo '$' del código anterior, podría dejar de funcionar en algunos casos. –
Lo entiendo ahora. Gracias – Rehan
he comprobado con $ ("cabecera, pie de página") animar ({backgroundColor: "# fd9c3d"}, 1200).; en la sentencia if y no parece estar funcionando –
sólo hay que poner una alerta para probar si el evento está disparando, dentro y fuera de la sentencia if. – jondavidjohn