IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Hauteur d'un menu en fonction du scrollTop()


Sujet :

jQuery

  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut 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 : 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

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    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" });

  3. #3
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    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" });
     
        }
    });

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    Dans les deux ...

  5. #5
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    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....

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    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);
    });

  7. #7
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    });

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    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?

  9. #9
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    MAJ:

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  10. #10
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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" });
        }
    });

  11. #11
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    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 ?

  12. #12
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    Citation Envoyé par Lunesti Voir le message
    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.

  13. #13
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    Merci pour la réponse, mais à quel moment on déclenche du coup, car on écrit d'abord
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
            $('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 ?

  14. #14
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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...

  15. #15
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Par défaut
    bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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" });
    		}
    	}
     
    });

  16. #16
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Par défaut
    Ca fonctionne, merci à toi !
    Surpris néanmoins qu'en enchainant les conditions comme je l'ai fait ça n'a pas pris.

Discussions similaires

  1. Taille en hauteur d'un menu déroulant
    Par LDDL dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 21/07/2007, 08h41
  2. hauteur d'un menu déroulant
    Par LDDL dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 20/07/2007, 09h38
  3. Comment gérer la hauteur d'une page en fonction de la résolution ?
    Par Kenshin86 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 10/05/2007, 14h55
  4. Menu en fonction des utilisateurs
    Par golnok dans le forum ASP.NET
    Réponses: 4
    Dernier message: 24/04/2007, 17h28
  5. Hauteur d'un menu horizontal adapté à la taille de police
    Par BlackWood dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 01/02/2007, 10h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo