Discussion :

[Neewd]

Bonjour,

Dans l'optique d'animé une image en fonction de la position du scroll, j'aimerais bouger une image du header qui cache le texte quand le scroll arrive en haut de la div de texte. Et donc de la réafficher quand on ressort de la div.

Cependant je n'arrive pas à détecter si l'utilisateur fait un scroll vers le bas ou vers le haut.
J'avais comme idée de sauvegarder chaque valeur de scrollTop, et de comparer la nouvelle valeur à la dernière rentré afin de savoir si il scroll vers le haut ou vers le bas, mais je ne sais pas comment faire ça.
Par le localSotrage peut-être ?

[saymoneu]

Bonjour,

Ce code là devrait convenir,

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       console.log("scroll vers le bas");
   } else {
       console.log("scroll vers le haut");
   }
   lastScrollTop = st;
});

[SpaceFrog]

sinon avec jquery je l'aurais traité comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$('#mondiv').on('scroll', function(){
    pos= $(this).data('prevpos')? $(this).data('prevpos'):0;
    sens=  $(this).scrollTop() > pos
    $(this).removeClass(sens?'red':'green').addClass(sens?'green':'red');
    $(this).data('prevpos',$(this).scrollTop());
});

http://jsfiddle.net/n8rXS/1/

[danielhagnoul]

Bonsoir

La solution de @saymoneu est du jQuery valide et valable. Et le paramètre "st" contient la valeur nécessaire pour décider de l'affichage de l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var lastScrollTop = 0;
 
$( window ).on( "scroll", function(){
   var st = $( this ).scrollTop();
 
   if ( st > lastScrollTop ){
       console.log( "scroll vers le bas", st );
   } else {
       console.log( "scroll vers le haut", st );
   }
 
   lastScrollTop = st;
});