Tema: Detectar Scroll hacia abajo | JQuery
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 22/03/2012, 18:16
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: Detectar Scroll hacia abajo | JQuery
Yo haría algo así:

Código Javascript: 
Ver original
  1. $(function(){
  2.     //detectar scroll hacia abajo
  3.     var obj = $(document);          //objeto sobre el que quiero detectar scroll
  4.     var obj_top = obj.scrollTop()   //scroll vertical inicial del objeto
  5.     obj.scroll(function(){
  6.         var obj_act_top = $(this).scrollTop();  //obtener scroll top instantaneo
  7.         if(obj_act_top > obj_top){
  8.             //scroll hacia abajo
  9.             
  10.             
  11.         }else{
  12.             //scroll hacia arriba
  13.             
  14.             
  15.         }
  16.         obj_top = obj_act_top;                  //almacenar scroll top anterior
  17.     });
  18. });

Ejemplo:
Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  5.     <script type="text/javascript">
  6.         $(function(){
  7.             //detectar scroll hacia abajo
  8.             var obj = $(document);          //objeto sobre el que quiero detectar scroll
  9.             var obj_top = obj.scrollTop()   //scroll vertical inicial del objeto
  10.             obj.scroll(function(){
  11.                 var obj_act_top = $(this).scrollTop();  //obtener scroll top instantaneo
  12.                 if(obj_act_top > obj_top){
  13.                     //scroll hacia abajo
  14.                     
  15.                     alert('Abajo');
  16.                     
  17.                 }else{
  18.                     //scroll hacia arriba
  19.                     
  20.                     alert('Arriba');
  21.                     
  22.                 }
  23.                 obj_top = obj_act_top;                  //almacenar scroll top anterior
  24.             });
  25.         });
  26.     </script>
  27.     <title>Test</title>
  28.     <style type="text/css">
  29.     <!--
  30.         body{
  31.             height:3000px;
  32.         }
  33.     -->
  34.     </style>
  35. </head>
  36. <body>
  37.     <p>&nbsp;</p>
  38. </body>
  39. </html>

Claro que nunca usarías alerts de esa forma, son molestos :P
__________________
nahueljose.com.ar