Hauteur d'un menu en fonction du scrollTop()

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:

---

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

Bonjour,

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

Code:

---

1 2 3 4

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

---

Merci pour la réponse

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

Code:

---

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" });   } });

---

Dans les deux ...

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....

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:

---

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); });

---

Merci pour la réponse, je comprends mieux. Cela a l'air de marcher mais je remarque que ça fait effet que lorsqu'on scroll la page "continuellement", c'est à dire sans s'arrêter. Le menu passe bien de 150px à 100px, mais dés que je relâche le scroll, le menu revient à 150 px. Or je voudrais que une fois que l'on scroll et qu'on relâche, le menu reste à 100px. C'est le but recherché.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// ===== Scroll to Top ==== $(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_ },100); }); $('#return-to-top').click(function() { // When arrow is clicked $('body,html').animate({ scrollTop: 0 // Scroll to top of body }, 500); });

---

Bonjour,

Je viens de faire un teste sous chrome et je n'ai remarqué aucun effet.

tu n'as pas un exemple de code en ligne?

MAJ:

Ca semble fonctionner maintenant, mais lorsque je scroll vers le haut (pour revenir au top page) le menu reste toujours à 100px.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

$(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   $('nav').animate({ height: "100px" });   } else { $('#return-to-top').fadeOut(200); // Else fade out the arrow height_ = "150px";   } $('.header').stop().animate({ "height": height_ }, 100);   // A $( document ).ready() block.   });   $('#return-to-top').click(function() { // When arrow is clicked $('body,html').animate({ scrollTop: 0 // Scroll to top of body }, 500);   });

---

Sinon tu peux retrouver mon code en ligne içi : https://codepen.io/arben-peposi/pen/xxdmYmO . il y a des pb des design mais on s'en moque un peu içi l'essentiel c'est de contrôler la fonctionnalité du menu lors du scroll ;)

bonjour,

le 1er code * fonctionne très bien, avec les 2 .stop().
Inutile de le passer au mixeur.

* sauf que maintenant, il faut '.header nav' :

Code:

---

1 2 3 4 5 6 7 8 9 10

$(window).scroll(function() { if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#return-to-top').fadeIn(200); // Fade in the arrow $('.header nav').stop().animate({ height: "50px" }); // ici j'ai mis 50px, c'est bien suffisant   } else { $('#return-to-top').fadeOut(200); // Else fade out the arrow $('.header nav').stop().animate({ height: "150px" }); } });

---

Ca fonctionne ! Merci !

Il fallait appliquer les effets sur la nav directement, je n'y avais pas pensé...

Par contre je n'ai toujours pas compris pourquoi on utilise stop() dans le if alors qu'on veut justement exécuter l'animation ? logiquement le stop n'est pas uniquement dans le else ?

Citation:

---

Envoyé par Lunesti

Par contre je n'ai toujours pas compris pourquoi on utilise stop() dans le if alors qu'on veut justement exécuter l'animation ? logiquement le stop n'est pas uniquement dans le else ?

---

Parce que quand le scrollTop ==50 (par exemple) une première animation se déclenche, et quand il devient 51, une deuxième animation sera déclenchée alors que la première n'a pas été encore terminée, ce qui va produire un cumule d'animations.

Donc il faut toujours arrêter l'animation précédente que se soit dans le if ou else.

Merci pour la réponse, mais à quel moment on déclenche du coup, car on écrit d'abord

Code:

---

$('nav').stop().animate({ height: "50px" });

---

Ce qui est un stop() animation on est d'accord ? ce n'est pas ce qui va déclencher l'animation ?

Autre problématique, j'essaye de faire en sorte que l'effet d'animation se déclenche uniquement quand la largeur du window est supérieur ou égale à 768px (donc en dessous, aucune animation). J'ai écrit :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$(window).scroll(function() {   if ($(this).width() >= 768 && $(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#return-to-top').fadeIn(200); // Fade in the arrow $('nav').stop().animate({ height: "50px" }); // ici j'ai mis 50px, c'est bien suffisant } else { $('#return-to-top').fadeOut(200); // Else fade out the arrow $('nav').stop().animate({ height: "150px" }); }   }); // A $( document ).ready() block.     $('#return-to-top').click(function() { // When arrow is clicked $('body,html').animate({ scrollTop: 0 // Scroll to top of body }, 500);   });

---

Mais ça ne fonctionne pas, pourtant j'ai bien précisé que si la largeur du window est bien au dessus ou égal à 768px...

bonjour,

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(window).scroll(function() {   if ($(this).width() >= 768) // tablet + desktop { if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#return-to-top').fadeIn(200); // Fade in the arrow $('nav').stop().animate({ height: "50px" }); } else { $('#return-to-top').fadeOut(200); // Else fade out the arrow $('nav').stop().animate({ height: "150px" }); } }   });

---

ou plutôt :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(window).scroll(function() {   if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#return-to-top').fadeIn(200); // Fade in the arrow if ($(this).width() >= 768) // tablet + desktop { $('nav').stop().animate({ height: "50px" }); } } else { $('#return-to-top').fadeOut(200); // Else fade out the arrow if ($(this).width() >= 768) // tablet + desktop { $('nav').stop().animate({ height: "150px" }); } }   });

---

Ca fonctionne, merci à toi !
Surpris néanmoins qu'en enchainant les conditions comme je l'ai fait ça n'a pas pris.