• Fixer un menu au défilement

    Pour fixer simplement votre menu, vous pouvez utiliser la propriété "position: fixed;" en CSS. En revanche, si votre menu est par exemple placé sous le header, vous voudriez pouvoir le fixer seulement une fois qu'il se trouve en haut de la page.
    Pour cela, il faut utiliser du JavaScript.

    /!\ Le JS doit être activé sur votre blog

    Commencez par créer votre menu en HTML (définissez le par un ID) , et placez le dans un module simple.

    <div id="menuNavigation">MON MENU, AVEC DU TEXTE, DES LIENS ET DES IMAGES</div>

    Grâce au css, vous allez pouvoir le placer où vous voulez sur votre page, et modifier sont apparence. Dans cet exemple, je vais le placer sous mon #header, d'une hauteur de 250px.
    Placez le en "position: absolute;"
    => [Tuto] Contenu hors des articles

    #menuNavigation { position: absolute;
          top: 250px; /*hauteur du header*/
          width: 800px; /*largeur du menu*/
          left: 50%; /*place le bord gauche au centre*/
          margin-left: -400px; /*décale la moitié du menu vers la gauche pour le placer au centre*/
          propriété : valeur;
    }

    Nous avons maintenant besoin de définir sont apparence quand il doit être "fixe". Je vais donc simplement ajouter une classe à mon id, et le définir en "position:fixed" (pour le fixer), ainsi qu'en "top: 0px;" pour le coller en haut de la page. Vous pouvez bien sûr ajouter d'autres propriétés pour changer sont apparence.

    #menuNavigation.fixe { position: fixed;
          top: 0px;
          propriété : valeur;
    }

    Maintenant, passons au javascript, que vous placez dans le même module que votre menu.
    Un script JS se place toujours entre les balises <script> JS </script>
    Nous allons utiliser window.onload pour exécuter notre script à la fin du chargement de la page.

    Commençons par définir nos variables : nous auront besoin bien évidemment de notre #menu, et si vous ne voulez pas vous embêter à calculer quand il doit se fixer, nous allons également récupérer #header.

    window.onload=function(){
          var menu = document.querySelector("#menuNavigation");
          var header = document.querySelector("#header");
    }

    Nous devons ensuite récupérer la taille de la fenêtre du client, et savoir de combien il a "scrollé" la page.

    function scrolled(){
          var windowHeight = document.body.clientHeight,
          currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
    }

    Sachant cela, nous pouvons changer la classe de notre menu si la page a été "scrollée" de la hauteur du header. Toujours dans la fonction "scrolled" on ajoute l'instruction suivant :

    menu.className = (currentScroll >= header.offsetHeight) ? "fixe" : "";

    menu, c'est la variable représentant notre #menu.
    className est une commande JS permettant de modifier la classe d'un élément. Ici, nous ajoutons la classe .fixe à #menuNavigation
    currentScroll est le défilement de la page (scroll)
    header est la variable représentant #header
    offsetHeight est une commande permettant de récupérer la hauteur d'un élément (ici #header)

    Pour traduire cela, si le défilement de la page est supérieur ou égal à la hauteur du #header, la classe de #menuNavigation devient .fixe
    Notre menu prend donc les paramètres de #menu.fixe

    Pour finir ce code, nous devons ajouter un EventListener, sans quoi nous ne pouvons pas récupérer le défillement (scroll) de la page.

    addEventListener("scroll", scrolled, false);

    Voici le JS complet

    <script>// <![CDATA[
    window.onload=function(){
          var menu = document.querySelector("#menuNavigation");
          var header = document.querySelector("#header");
          function scrolled(){
                var windowHeight = document.body.clientHeight,
                currentScroll = document.body.scrollTop || document.documentElement.scrollTop;

                menu.className = (currentScroll >= header.offsetHeight) ? "fixe" : "";
          }
          addEventListener("scroll", scrolled, false);
    }
    // ]]></script>

    L'exemple ici est de fixer un menu en fonction du défilement de la page, mais vous pouvez utiliser cette technique pour modifier n'importe quel élément en fonction de votre position sur la page ;)


  • Commentaires

    1
    Dimanche 16 Février 2014 à 08:28

    J'ai pas compris l'effet qu'avait le code sur le menu ^^'

    2
    Dimanche 16 Février 2014 à 12:58

    => http://mondeimaginaire.eklablog.com

    Le menu "bibliothèque, univers digital, galerie, divers" est fixé en haut de la page une fois que header est passé
    3
    Dimanche 16 Février 2014 à 15:22

    MERCI BEAUCOUP *^*

    (P.S. : Je trouve l'effet de la menubar sur mondeimaginaire magnifique, bravo o:)

    4
    Mercredi 12 Mars 2014 à 10:01

    Pour :

    function scrolled(){
          var windowHeight = document.body.clientHeight,
          currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
    } Doit-on changer quelque chose ?

    Et à chaque fois qu’il y a mis « menu» on doit le remplacer par notre id ?

    5
    Mercredi 12 Mars 2014 à 12:08

    Il n'y a strictement rien à changer dans ce code.

    menu est le nom que j'ai donné à la variable. La seule chose qu'il faut modifier, c'est dans la deuxième ligne :

    var menu = document.querySelector("#menu");

    Remplace #menu par le nom de ton id

    6
    Lundi 7 Juillet 2014 à 23:04

    Coucou Nagalia... cela fait maintes fois que j'essaie mais mon menu ne se fixe pas.. pourrais tu me dire pourquoi?

    Ce serait vraiment trop gentil!!! Merkiiiiiiiiiiiiii (je suis trop mauvais)

     http://brot2you.eklablog.com/

    7
    Dimanche 19 Juillet 2015 à 16:21

    Ce code va fixer le menu de la même façon que ta barre verte avec tes rubriques quand on scroll la page?
    Merci de ta réponse! :)

    8
    Mardi 1er Septembre 2015 à 22:50

    Salut, J'aimerais savoir c'est quoi le ID

    Merci-

    9
    Mercredi 2 Septembre 2015 à 03:33

    => http://fanstasy-graph.eklablog.net/attributs-a106963640

    ID est l'abréviation d'Identifiant. C'est tout simplement le moyen de nommer et d'identifier un objet unique dans le code.

    10
    Mercredi 2 Septembre 2015 à 03:37

    Merci beaucoup :'3

    11
    Mardi 22 Décembre 2015 à 11:23

    Besoin D'aide en JAVASCRIPT SVP CORDIALEMENT

    • CSS

    #back-top{position:fixed;bottom:30px;margin-left:-30px;}
    #back-top a{width:108px;display:block;text-align:center;
        font:11px/100% Arial,Helvetica,sans-serif;text-transformuppercase;text-decorationnone;color#bbb;/* transition */-webkit-transition:1s;-moz-transition:1s;transition1s;}
    #back-top a:hover{color#000}/* arrow icon (span tag) */ 
    #back-top{width:108px;height:108px;display:block;margin-bottom:7px;background:#ddd url(http://i1155.photobucket.com/albums/p559/scrolltotop/arrow29.pngno-repeat center center;/* rounded corners */-webkit-border-radius:15px;-moz-border-radius15px;border-radius15px;/* transition */-webkit-transition:1s;-moz-transition1s;transition1s;
    #back-top a:hover{background-color#777}

     

    • HTML

    <p id="back-top"><a href="#top">back to top</a></p>

     

    • javascript

    <script type="text/javascript">// <![CDATA[

    (document).ready(function(){

     var ("#back-top").hide();

     (function () {

     (window).scroll(function () {

     if ($(this).scrollTop() > 50) {

     var ('#back-top').fadeIn('slow');

     } else {

     var ('#back-top').fadeOut('slow');

     }

     });

     var ('#back-top a').click(function () {

     var ('html, body').animate({

     scrollTop: 0

     }, 800);

     return false;

     });

     });

     

    });

    // ]] ></script>

    • result

     

     

    12
    Apriler
    Dimanche 24 Janvier 2016 à 13:55

    Hello! Merci pour ces explications, petit soucis, je cherche à coller mon menu après scroll toujours mais à un autre menu (bandeau déjà fixé en haut de page), une solution? :)

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    13
    Yo18
    Jeudi 25 Février 2016 à 18:21

    Merci infiniment !! c'est super bien expliqué et ça fonctionne parfaitement !! :D

    14
    Lilloupatch
    Mardi 19 Avril 2016 à 14:41

    La lecture pourrait être super intéressante mais vous avez une pub qui cache toute une partie ^_^

     

    Bonne continuation ^_^

    15
    Samedi 28 Mai 2016 à 09:11

    Hey merci ! C'est exactement ce que je recherche, mais après plusieurs essais, je n'arrive pas à le faire :(

    16
    Dimanche 1er Janvier 2017 à 17:39

    Merci pour ce tuto, j'attends l'activation du Javascript sur mon blog de test de thème pour voir si cela marche. :)

    17
    Dimanche 17 Septembre 2017 à 19:42
    18
    Mercredi 26 Décembre 2018 à 18:08

    Salut! J'ai lu sur ton tuto des flèches que l'on pouvait utiliser ce code pour que les flèches n'apparaissent qu'après le header. J'ai beau essayé, ça ne fonctionne pas. Il y a rien qui bouge. Je dois sûrement pas comprendre le fonctionnement du code. Est-ce que ça serait possible de m'aider stp? Merci.

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :