Discussion :

[Lunesti]

Bonjour,

En fonction du scroll de l'utilisateur la hauteur du header (le menu) passe de 150px à 100px, et si le scrollTop <= 50 il doit revenir à 150 px.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200); // Fade in the arrow
        $('.header').animate({ height: "100px" });
 
    } else {
        $('#return-to-top').fadeOut(200); // Else fade out the arrow
       $('.header').animate({ height: "150px" });
    }
});

Cela fonctionne, mais ne marche pas pour faire revenir le header à 150px lorsqu'on revient en haut du site. Je ne vois pas où est l'erreur.

Merci de m'aider

[Toufik83]

Bonjour,

Il faut arrêter l'animation avec $.stop() :

Code :

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

1
2
3
4
 
$('.header').stop().animate({ height: "100px" });
//et
$('.header').stop().animate({ height: "150px" });

[Lunesti]

Merci pour la réponse

J'ai essayé, mais ça ne fonctionne pas. Il faut bien stopper dans le else ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200); // Fade in the arrow
        $('.header').animate({ height: "100px" });
 
    } else {
        $('#return-to-top').fadeOut(200); // Else fade out the arrow
        $('.header').stop().animate({ height: "100px" });
 
    }
});

[Toufik83]

Dans les deux ...

[Lunesti]

Je ne comprends pas l'intérêt de stopper l'animation alors qu'il faut la déclencher, lorsque scrollTop >= 50... selon moi il faudrait stopper dans le else, mais ça ne fonctionne pas....

[Toufik83]

Bonjour,

La durée de l'animation de jQuery.animate() est de 400 millisecondes par défaut, alors que l'événement scroll n'attendra pas la fin de chaque animation pour passer à l'autre.

Sinon tu peux diminuer la durée à 20milisecondes pour voir la différence :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(window).scroll(function() {
    let height_="100px"; 
    if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200); // Fade in the arrow
     } else {
        $('#return-to-top').fadeOut(200); // Else fade out the arrow
        height_="150px";
    }
    $('.header').stop().animate({ "height": height_ },20);
});