• Passer au contenu principal
  • Passer à la barre latérale principale
  • Passer au pied de page
  • Être anonyme sur internet
  • Être anonyme sur Paypal
  • Mon téléphone est-il espionné ?
Logo Des Geeks Et Des Lettres

Des Geeks et des lettres

L'impact des technologies numériques sur l'individu

Tapez vos requêtes

Menu fixe mais flottant selon la scrollbar (JS + CSS)

Rédigé par Mimie le 19 octobre 2011

Certains ne comprennent peut-être pas ce dont je veux parler par « menu fixe mais flottant selon la scrollbar », en fait je fais référence au nouveau menu dans Gmail qui est figé en haut mais suit la scrollbar lorsque nous descendons l’ascenseur.
Cet effet permet d’avoir toujours à disposition le menu où que nous soyons dans la lecture de nos mails.

Ça semble anodin au premier abord pour la plupart des gens, un peu de CSS, un petit « position: fixed » et le tour est joué ? hé bien non, c’est plus fort que ça, car au départ le menu est incrusté et c’est seulement lorque la scrollbar atteint un point précis (ici lorsque le haut de la fenêtre atteint le menu) que le menu devient flottant, c’est donc dynamique, à comprendre qu’il va falloir utiliser du JavaScript.

Ce menu m’a intrigué dès le départ car je ne savais pas moi-même réaliser un tel effet, jusqu’au jour où j’en ai eu besoin pour l’affichage d’un deck de type « Commander » sur MS.

Démo

En effet au niveau de la vue d’un deck, le survol de la souris sur le nom d’une carte fait afficher l’image de celle-ci sur le côté gauche. Le problème c’est que la quantité de cartes d’un deck « Commander » fait que l’image ne devient plus visible lorsque nous scrollons vers le bas pour voir l’intégralité des cartes. D’où l’idée de rendre flottante l’image de la carte lorsque la scrollbar tente de la masquer.

Code

Finalement c’est assez simple à comprendre et donc à mettre en place.

CSS

Votre élément (menu, image, bandeau, div, etc.) a rendre flottant a par défaut une position « relative » par rapport à son conteneur, cette position devra passée à « fixed » au moment où nous le choisirons, dans notre cas lorsque la scrollbar tentera de masquer notre élément.

Le changement d’état de notre élement se fera par le biais d’une classe CSS, appliquée par du JavaScript, la voici :

votre_menu_ou_votre_image_ou_votre_element.floatable {
 position: fixed;
 top: 10px; // non-obligatoire
 }

JS

Pour détecter qu’il est temps de changer la position de notre élément, il faut connaître le positionnement de la scrollbar et la comparer au positionnement de notre élément. Pour cela j’utilise la fonction $(window).scroll() de jQuery.
Voici le mécanisme à mettre en place :

// listen for scroll
 var positionElementInPage = $('#votre_menu_ou_votre_image_ou_votre_element').offset().top;
 $(window).scroll(
 function() {
 if ($(window).scrollTop() >= positionElementInPage) {
 // fixed
 $('#votre_menu_ou_votre_image_ou_votre_element').addClass("floatable");
 } else {
 // relative
 $('#votre_menu_ou_votre_image_ou_votre_element').removeClass("floatable");
 }
 }
 );

Lorsque nous descendons l’image nous suit et reste visible, lorsque nous remontons, elle se recale à l’endroit du départ si nous dépassons son emplacement d’origine.

Sources

Si mes explications ne sont pas claires, voici un fichier d’exemple : menu_fixe_mais_flottant.html.

Sending
Quelle note attribuez-vous sur un total de 5 ?
4.86 (7 votes)

Mes autres entrées sur le sujet: Web

NordVPN : Digne de confiance

Actuellement, NordVPN est l'un des fournisseurs de services VPN premium les plus sûrs.


Confidentiel

  • Son emplacement commercial
  • Sa politique d'absence de logs
  • Son infrastructure

...garantissent que la confidentialité de vos données sera respectée.

Il a fait l'objet de deux audits publics et détient la certification ioXt.

EN SAVOIR PLUS


découvrez NordVPN en 1 clic

Evolution

En juillet 2019, NordVPN a sorti son opus magnum : le protocole NordLynx.

Construit autour du protocole de tunneling WireGuard, il est capable d'offrir encore plus de fiabilité (grâce au système de double NAT) et des vitesses plus rapides.


Utilisez notre moteur de recherche

Qui suis-je ?

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web.
Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

114 Comments

  1. Mick 18 septembre 2018

    Bonjour,

    L’article date mais je pose malgré tout ma question car l’effet m’intéresse.

    Le menu ne se fixe pas lorsque j’essaie d’avoir un aperçu du rendu en me rendant ici : https://desgeeksetdeslettres.com/sources/menu_fixe_mais_flottant.html

    La version jQuery utilisée est ancienne ? Pensez-vous que le problème peut venir de là ?

    Merci de votre aide 🙂

    Répondre
  2. AlainR 7 août 2018

    Bonjour.
    l’appel de jquery mériterait un https. Sinon, Firefox p.ex. qui peut bloquer le chargement du contenu mixte ne charge pas la librairie et rien ne fonctionne.
    Cdt.

    Répondre
    • Mallory Lebel 7 août 2018

      Bonjour,
      En effet l’article date de 2011 maintenant (à l’époque le https n’était pas largement diffusé) et mériterait sûrement une mise à jour, cependant malheureusement Mimie a cessé de participer à ce blog.

  3. Telonos 12 juin 2017

    Merci beaucoup! Le fichier source clarifie les choses en tout cas pour un novice comme moi.

    Répondre
  4. guede 9 juin 2017

    merci

    Répondre
  5. Cybrdome 13 décembre 2016

    Bonjour,

    sur mon pc votre exemple ne fonctionne pas dans chrome, ni dans chromium, ni dans waterfox. Seulement dans Edge.

    Cordialement.

    Répondre
  6. Mars 13 août 2016

    Affiche le source de la démo pour le comprendre quelque chose et le reproduire.

    Dans le de ta page à toi, recopie
    <pre></pre>.
    Juste avant la balise fermante recopie le code indiqué ici.

    jQuery est disponible en ligne. Les manip montrées ici ne te demandent pas de l’installer ni chez toi, ni chez ton hébergeur.

    Répondre
  7. Wedes 12 août 2016

    j’ai aimé ce sujet, que j’ai cherché aussi longtemps, mais la question que je me pose comment installer « jqueri » s’il ya quelqu’un qui peut m’aider svp !

    Répondre
  8. val 24 décembre 2014

    Bonjour,
    J’ai essayer avec le module « advertising_block »
    de prestashop 1.6.0.9
    et ça casse tout
    ça ouvre le module catégorie, sa foire même le module de paiement dans son fonctionnement.
    si non c’était chouette !

    Répondre
  9. Simon 12 novembre 2014

    Bonjour, j’ai un petit problème. Ce script est mal du tout, mais la barre est fixe trop tôt, c’est à dire que je veux qu’elle soit fixe, que, à un certain endroit (par exemple, à 50px depuis le haut de l’écran). Est-ce que cette valeur est modifiable ? Merci beaucoup.

    Répondre
  10. Benjamin 10 octobre 2014

    Comme il dit il a rajouté une ligne dans le fichier css avec une class qui fixera son menu… ensuite il a créé un script JavaScript dans le fichier js quidemande l’ajout de la class à … .

    je pense que tu peux utiliser le code du tuto des geeksetdeslettres pour faire ça !
    Il y a un forum assez dynamique pour répondre et te guider dans ta démarche : http://www.alsacreations.com/

    Bon courage,

    Répondre
  11. banak 9 octobre 2014

    Bonjour,
    En efft j’ai trouvé quelqu’un qui à pu résoudre cela ici : http://forum.joomla.fr/showthread.php?188955-Cr%C3%A9er-un-menu-flottant-puis-fixe-au-moment-du-scrolling-de-la-page

    Mais je ne comprend pas la démarche qu’il explique???

    Répondre
  12. Benjamin 6 octobre 2014

    Bonjour,

    je ne sais pas trop comment tu peux faire ça. .. j’ai trouvé ça pour joomla : http://extensions.joomla.org/extensions/style-a-design/modules-panel/15318

    regarde directement sur le web avec menu scrollable + joomla ou menu flottant + joomla, etc.

    Répondre
  13. banak 6 octobre 2014

    Bjr,
    je n’ai pas réussie à le placer sur un site joomla ( http://www.sunuinfo.com ) ; pourtant j’ai trouvé l’idée cool.
    En effet le script ne s’exécute pas. un coup de pouce me ferais bien du bien!!!

    Cordialement!!!

    Répondre
  14. Iban 25 juin 2014

    Salut Benjamin,
    alors je vais essayer d’être le plus clair possible :

    – j’ai un bloc en position: »fixed »; qui se place à droite au chargement de la page, et y reste pendant le scroll
    – et lorsque dans la lecture de la page on arrive en bas, au footer, il bouge légèrement de place pour se mettre dans le footer, à côté des 3 autres widget

    vu que j’ai déjà placé le html de cette div dans un 4e widget du footer, il suffit juste que j’arrive à lui faire perdre l’attribut position: »fixed »; lorsqu’on arrive au footer

    par contre pour les transitions en css3, ça ne marche pas car cela ne peut concerner la propriété « position »

    voila j’espère que tu auras mieux vu ce que je souhaite faire
    en fait c’est sur la page « minceur » que ça illustre le mieux ce que je veux faire (http://www.atelier-ongle-et-beaute.fr/minceur/), dommage que ça ne marche pas aussi bien sur les autres pages…

    sinon me conseillerais tu de place le javascript ailleurs que tout en bas ?

    un grand merci

    Répondre
  15. Benjamin 25 juin 2014

    J’ai regardé ton site… la zone de droite apparait bien. En cas tu veux que ton élément soit en rapport avec ton footer ? Après suivant les pages, si tu as plus ou moins beaucoup de chose à chargé la lecture de ton javaScripts (il me semble) se fait en dernier.. . à vérifier. As-tu essayer quelque chose avec du css3, en transition ?

    Tu veux que ton élément fasse quoi exactement ? l’élément dois s’arrêter à la limite du footer ?

    Répondre
  16. Iban 24 juin 2014

    Bonjour,
    et merci de t’intéresser à mon cas! 🙂
    J’ai essayé en effet d’inverser les fonctions, et ça marche mais pas sur toutes les pages, je ne comprends pas… Je suis obligé d’actualiser la page pour que ça marche, et encore, le comportement du javascript dépend des pages.. Des fois ça le lance plus tôt que d’autre.. C’est bizarre -> http://www.atelier-ongle-et-beaute.fr/
    En fait ce que j’aimerais, c’est remplacer la condition if ($(window).scrollTop() >= positionElementInPage) par un truc du style if « le scroll arrive au footer ».
    En te remerciant

    Répondre
  17. Benjamin 24 juin 2014

    Bonjour Iban,

    Je ne suis pas sûr d’avoir tout compris de ce que tu cherche à faire mais si c’est l’inverse tu peux inverser les fonctions qui sont dans le code javaScript…. Tu as un exemple sur un site ou une meilleur explication ?

    Répondre
  18. iban 23 juin 2014

    Bonjour,
    et merci pour ce tuto, et pour toutes les contributions!
    Je cherche en fait à faire l’inverse : partir d’une class fixed (qui serait sous le menu, une sorte de pti bloc sur la droite), qui se transformerait une fois arrivé au footer pour s’imbriquer dans ce dernier.
    J’ai donc créé mes deux div qui fonctionnent chacune indépendamment, mais je sèche sur le javascript pour les lier… J’ai fait des tests avec les exemples donnés, mais je n’arrive pas à faire ce que je souhaite.
    Auriez vous une piste de code pour m’aider ?
    Merci beaucoup

    Source article : https://desgeeksetdeslettres.com/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css#ixzz35U4RTLTW

    Répondre
  19. iban 23 juin 2014

    Bonjour,
    et merci pour ce tuto, et pour toutes les contributions!
    Je cherche en fait à faire l’inverse : partir d’une class fixed (qui serait sous le menu, une sorte de pti bloc sur la droite), qui se transformerait une fois arrivé au footer pour s’imbriquer dans ce dernier.
    J’ai donc créé mes deux div qui fonctionnent chacune indépendamment, mais je sèche sur le javascript pour les lier… J’ai fait des tests avec les exemples donnés, mais je n’arrive pas à faire ce que je souhaite.
    Auriez vous une piste de code pour m’aider ?
    Merci beaucoup

    Répondre
  20. Pierre-Henri 16 juin 2014

    Exactement ce que je cherchais ! 🙂

    Merci

    Répondre
  21. Benjamin 16 juin 2014

    tu dois mettre tes pixels à la place de « positionElementInPage »

    Répondre
  22. Vydja 16 juin 2014

    Ok,,merci, mais le soucis c’est que je ne sais absolument pas où placer ce 30 px !

    Répondre
  23. Vydja 16 juin 2014

    Pour info, j’ai ajouté le z-index parce-que sans lui, le menu apparaissait en dessous des images et du texte de mes articles. M’enfin…

    Répondre
    • Benjamin 16 juin 2014

      Tu dois rajouter position:fixed dans ta class floatable pour que lorsque que le scroll aura parcouru X pixels la class floatable sera ajouté à ton menu.

      Pour connaitre le nombre de pixels qui sépare ton menu du haut de ton écran, utilise measure it (firefox) ou rajoute au pif et régule ensuite en testant.. 😉

  24. Vydja 16 juin 2014

    C’est incroyable de réagir comme ça. Tu ne respectes pas le fait que je suis débutante. Si c’est pour me faire agresser, je préfère encore me débrouiller seule. Peace…

    Répondre
    • Mimie 16 juin 2014

      ahah c’est la meilleure 😀 peace

  25. Mimie 16 juin 2014

    Je ne vois nulle part de z-index dans ma classe CSS mais bon vu que je dois rester zen je te souhaite bon courage, ++

    Répondre
  26. Vydja 16 juin 2014

    Zen Mimie… Je n’avais pas vu le .floatable, je viens de l’ajouter. Ca donne ça :

    #HTML9.floatable {

    z-index: 999;
    }

    Pour la hauteur du menu, je ne trouve pas.

    Répondre
  27. Mimie 16 juin 2014

    Normal il doit etre fixe seulement qd la scrollbar le masque … l’ajout de la classe css « floatable » tu l’as mis où ??? là elle s’applique bien à ton menu mais vu qu’il ne trouve pas le CSS à appliquer bah il ne fait rien ….
    Il te faut quelque chose du genre #HTML9.floatable { … } quelque part dans tes styles

    Ensuite il faut retirer la hauteur de ton menu en pixels à ta variable elementInPage, environ 40px dans ton cas (elementInPage -= 40; )

    Répondre
  28. Vydja 16 juin 2014

    Enfin si, le changement est que le menu n’est plus fixe.

    Répondre
    • benjamin 16 juin 2014

      tu peux me montrer ta class floatable ?

    • Mimie 16 juin 2014

      C’est dans l’article, bloc Code, partie CSS … vous abusez là

  29. Vydja 16 juin 2014

    Mimie > Merci ! Je viens d’essayer ta méthode, malheureusement toujours rien ?
    Benjamin > Je viens d’enlever le position: fixed dans le CSS, mais pas de changement non plus…

    Répondre
  30. Mimie 16 juin 2014

    Effectivement jQuery est chargé bizarrement, remplace les $ par jQuery dans ton script que tu viens de déplacer.

    Répondre
  31. Vydja 16 juin 2014

    Mimie, mille merci pour cette précision, pas évident de s’en sortir au début.
    J’ai déplacé le javascript et je ne vois pourtant aucun changement ?

    Répondre
  32. Mimie 16 juin 2014

    Lut Vydja, ton javascript doit être placé avant la fermeture de la balise body (tout en bas de page) et non tout au début …

    Répondre
  33. Vydja 16 juin 2014

    J’ai envoyé un message plus haut où je donnais tout mon code, mais je ne sais pas s’il est passé.
    J’ai finalement réussi à enlever les caractères spéciaux affichés sur la page.
    Je souhaiterais simplement de l’aide pour ce qui est du menu fixe.
    Désolée pour le nombre de messages ! 😉

    Répondre
    • Benjamin 16 juin 2014

      Je ne vois pas ton code, par contre je suis sur ton blog, je regarde et te redis si je trouve l’erreur
      ;D

    • Benjamin 16 juin 2014

      J’ai regardé rapidement, il ne devrait pas avoir de position fixed dans ton css pour ton menu en tout . La class qui fixed le menu est à appelé avec le bout de code jQuery mis plus haut ..

  34. Vydja 16 juin 2014

    Ah, et Vydja = Diane ! Scuse, je me suis emmêlée les pinceaux dans mes pseudos.

    Répondre
  35. benjamin 16 juin 2014

    Tu as du surement laissé un caractère inattendu.. Regarde ce que tu as écrit. Tu as peu être oublier de fermer une balise ou quelque chose de ce genre. .. Je peux voir le bug ?

    Répondre
    • benjamin 16 juin 2014

      c’est en réponse à Vydja. Diane, il faudrait que je puisse voir ton code…

  36. Vydja 16 juin 2014

    Rebonjour,

    j’ai fait une grosse bourde dans mon code que je ne sais pas réparer, et sur mon blog s’affiche un pavé de code.
    Help !

    Répondre
  37. Diane 15 juin 2014

    Bonjour,
    je bloque complètement depuis quelques heures sur mon menu en haut de page.
    C’est la première fois que j’utilise jQuery donc j’ai sûrement fait une erreur quelque part.
    Pouvez-vous m’aider ?
    Merci 🙂

    Répondre
  38. Mouna 31 janvier 2014

    ok, Merci beaucoup Benjamin 🙂 🙂

    Répondre
    • Benjamin 1 février 2014

      sinon tu ne trouve pas. .. il te suffit de rajouter une bordure à ton menu qui est au dessus de l’autre.

      border-width: 0 0 1px; (épaisseur du tracé, ici en bas)
      border-style: solid; (type de tracé)
      border:color: red; (couleur du tracé)

      pour plus de détails : http://www.w3schools.com/css/css_border.asp

  39. Mouna 31 janvier 2014

    bon, en fait, mon pb c’est que j’ai 2 menus en haut de ma page, ok? et entre les 2 menus il y a un petit espace à travers lequel on peut voir le bckground.
    je veux que le défilement s’arrête juste avant le 2ème menu (celui en bas) . quand je fixe le margin à 0, les deux menus seront collés , alors que moi je désire garder le petit espace
    🙂

    Répondre
    • Benjamin 31 janvier 2014

      tu devrais lire l’article que je t’ai mise en lien, il te serait pas mal utile pour faire ce que tu souhaite.. il y a des exemples pour que tu comprennes les possibilités des margin, padding,etc.

      solution magicien :

      il faut que tu comble l’écart entre tes deux menus par une ligne de couleur qui correspond à ton arrière plan.. et on ne verra plus le contenu au travers tes menus.. par exemple avec une div et un padding…

  40. Mouna 31 janvier 2014

    bon, ok, j’essaie de me faire comprendre 🙂
    Dans cet exemple https://desgeeksetdeslettres.com/sources/menu_fixe_mais_flottant.html, lorsqu’on défile, on voit le texte « bloblo » touuuut en haut de la page (au dessus de « Mon texte fixe »), moi je veux qu’il disparaisse. je veux que le défilement s’arrête juste avant « Mon texte fixe ».

    j’espère être claire 🙂
    merci bcp.

    Répondre
    • Benjamin 31 janvier 2014

      Ok… là j’ai compris ! 😀

      En fait tu vois dans l’exemple, il n’y a pas de règles de margin sur pou les autres éléments du coup par défaut une marge est créée pour tout le monde. .. pour qu’il n’y ait plus cette espace/marge il faut que tu rajoute margin: 0 auto; le 0 pour les marges hautes et basses et l’auto pour la gauche et la droite. ..

      si tu veux tu peux regarder l’article : http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

  41. Mouna 31 janvier 2014

    bonjour

    merci pour l’article, sauf que j’ai un petit soucis, je souhaite que mon contenu s’arrête juste au dessous de mon menu, c-à-d que lorsque je défile, mon contenu ne passe pas derrière mon menu, ça défile et puis ça disparait, je ne le vois pas passer au dessus du menu.

    j’espère avoir été claire 🙂 🙂

    Répondre
    • benjamin 31 janvier 2014

      Je ne suis pas sûr d’avoir compris, le menu doit rester au dessus du contenu ? j’avoue ne pas vraiment comprendre.

      .. .essaie de rajouter un z-index : 50 (par exemple) à ton menu, il devrait passer au dessus de ton contenu ..
      Sinon rajoute une marge à ton contenu pour faire la différence de hauteur conteneur/menu.. .

      Vu que je ne suis pas certain d’avoir compris ce que tu demandais je réponds un peu au pif. . Bon courage

  42. Mars 28 janvier 2014

    @Loïc

    Je viens de réussir à le faire fonctionner dans un WordPress. Je passe par les mêmes étapes que toi, à savoir :
    – dans header.php, dans le « head» de la page, j’ajoute un appel à la bibliothèque jQuery (1.7.1.min.js pour avoir comme dans la demo) vérification faite, il le faut.
    – toujours dans header.php, la «div id= »#navbar » class= » navbar »» de mon thème devient une «div id= »#navbar » class= » »»
    – dans style.css je crée une #navbar.floatable { avec les instructions qui vont bien}
    -dans footer.php je copie le script juste avant «/body»

    J’avais plantage sur plantage avant de voir que Firebug me renvoyait une synthax error :
    dans le javascript j’avais (recopié)
    if ($(window).scrollTop()
    & g t ;
    = positionElementInPage) {
    alors qu’il faut
    if ($(window).scrollTop() >= positionElementInPage) {
    comme tu peu le voir sur la démo.

    depuis ça marche, j’ai même ajouté une condition pour afficher 28px plus bas pour les admins à cause de la barre (que je masque pour les autres utilisateurs).

    Répondre
    • Greg 28 janvier 2014

      Merci pour ta réponse, Mars.

  43. Loïc 18 janvier 2014

    J’aimerai utiliser cette fonction pour mon site mais je rencontre des difficultés…

    Je travail sur un WordPress, et il semble que le script ne soit pas prit en compte car le navigateur affiche par default le CSS de menu-float.floatable {position:fixed} et non menu-float {…}.

    voici se que j’ai fait :
    – j’ai modifié le fichier header.php en y appelant dans le head:

    – ensuite dans le fichier footer.php, juste avant le j’appel la fonction :

    // listen for scroll
    var positionElementInPage = $(‘#menu-float’).offset().top;
    $(window).scroll(
    function() {
    if ($(window).scrollTop() >= positionElementInPage) {
    // fixed
    $(‘#menu-float’).addClass(« floatable »);
    } else {
    // relative
    $(‘#menu-float’).removeClass(« floatable »);
    }
    }
    );

    – enfin j’ai défini mes 2 étapes dans le CSS :

    #menu-float{
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;}

    #menu-float.floatable {
    position: fixed;
    top: 0; // non-obligatoire
    }

    Ma question est donc pourquoi le script ne se déclenche pas? y’a t’il une déclaration spécifique pour les wordpress?

    Merci de votre aide !

    Répondre
  44. Fil 10 janvier 2014

    Super !
    Merci beaucoup.

    Répondre
  45. Benjamin 30 décembre 2013

    Bonjour Thomas,

    Pour que ton menu garde la même largeur il faut que tu modifie le css de ta div enfant de ta Div menu. Donner une largeur à la div enfant par exemple, margin : 0 auto.. .

    Répondre
  46. ENSLID 30 décembre 2013

    MERCI !!! SUPER

    Répondre
  47. Thomas 7 décembre 2013

    Bonjour,

    Tout d’abord merci pour l’article cependant je rencontre deux problèmes :
    1 : TypeError: jQuery(…).offset(…) is undefined
    Du coup pour pouvoir tester le reste j’ai remplacer la variable  » positionElementInPage « , par une valeur fixe mais j’aimerais tout de même réussir à récupérer la position de ma div à l’aide d’une fonction (ça fait plus propre).
    2 : Le css est modifié.
    Je m’explique, sur le principe ça fonctionne, mais quand je j’appelle  » .addClass(« floatable »); « , cela modifie le design de ma page. En effet, je suis censé avoir un menu qui ne prend pas toute la largeur de ma page, mais dans ce cas, ma barre de menu s’agrandit et prend toute la largeur…

    Si quelqu’un pourrait me donner des conseils/indices pour résoudre mes problèmes, ça serait vraiment sympa.

    En vous remerciant par avance,

    Répondre
  48. GBteam 5 septembre 2013

    Bonjour,
    merci beaucoup pour ce tuto, cependant je rencontre un petit problème. J’utilise le CMS Joomla (1.5), et je suis parvenu à faire fonctionner ce script, mais uniquement sur ma page d’accueil… Si je navigue dans une autre page du site, le menu ne se déplace plus… Auriez-vous une idée ?
    Merci d’avance

    Répondre
  49. Stevent 7 août 2013

    Bonjour, j’ai essayé de suivre les étapes mais sans succès. Voici ce que j’ai effectué :

    dans mon .tpl :

    // listen for scroll
    var positionElementInPage = $(‘#content_prices’).offset().top;
    $(window).scroll(
    function() {
    if ($(window).scrollTop() >= positionElementInPage) {
    // fixed
    $(‘#content_prices’).addClass(« floatable »);
    } else {
    // relative
    $(‘#content_prices’).removeClass(« floatable »);
    }
    }
    );

    Source article : https://desgeeksetdeslettres.com/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css#ixzz2bIBWLtkv

    et dans mon .css :

    .content_prices {
    /*margin-top:-110px;
    padding-top:10px;
    /*border-top:1px solid #ccc; */
    /*text-align:right;
    width: 125px ;
    float: right;
    margin-left:600px; */
    /*margin-top: 5px; */
    /*padding: 10px; */
    /*position: fixed;*/
    /*border: 1px solid #CCCCCC; */
    float: right;
    text-align: right;
    width: 178px;
    height: 0px;
    /*position: relative;*/
    margin-left: 573px;

    }

    .content_prices.floatable {
    position: fixed;

    }

    Répondre
  50. varmic 19 juillet 2013

    Super, très bien, exactement ce qu’il me fallait !!
    J’ai mis le paquet de texte dans une div et j’ai un un petit souci de largeur du texte mais cela passe très bien quand même.

    Merci

    Répondre
  51. Etienne 18 juillet 2013

    Bonjour,

    Très bonne ressource, qui fonctionne chez moi.

    Je cherche maintenant à borner le menu une seconde fois en bas (pour ne pas empiéter sur le footer).
    Les modification que j’ai faites fonctionnent mais uniquement sous firefox (et pas sous chrome), et de manière stroboscopique… c’est décoiffant 🙂

    Avez vous déjà réalisé un menu flottant doublement borné ? Si oui je suis preneur d’infos.

    Dans tous les cas je suis à votre disposition pour vous fournir mon code (qui n’a pas de place dans un commentaire à mon sens).

    Bonne journée,
    Etienne

    Répondre
  52. Pomme 13 juillet 2013

    Un grand grand merci !!!

    Répondre
  53. Bilbo 27 juin 2013

    Merci pour ce script très simple à mettre en place surtout pour un débutant comme moi.
    Cependant je rencontre un problème gênant: selon la résolution de l’écran le menue ce déplace.
    Existe il une façon de corriger ce problème, sachant que je suis débutant en CSS.

    Répondre
  54. stephen 13 juin 2013

    Merci pour ton aide. Exact, ma page est en mode Quirks et effectivement cela fonctionne avec les bons modes de document. Le soucis c’est que mes pages ont été faites avec frontpage (avec des tableau et du css bidouillé ) et que je n’ai que ça en haut de ma page :
    Pas de doctype…
    En mettant en normes IE9, ça fonctionne mais mon disign de site est alors … ravagé :/
    Bref, je suis un peu coincé …

    Répondre
  55. Mimie 13 juin 2013

    Chez moi cela fonctionne bien (testé IE9 et IE10), vérifie bien que le « Mode navigateur » soit IE9 et que le « Mode de document » soit aussi en « normes IE9 » ou « normes » tout court.
    Tu appuies sur F12 pour voir apparaître tout ça.

    Répondre
  56. stephen 13 juin 2013

    Bonjour
    Sur firefox ok, safari ok, IE 9 : marche pas :/ Vraiment dommage…
    Idem pour cette page : https://desgeeksetdeslettres.com/sources/menu_fixe_mais_flottant.html
    Une solution pour IE ?

    Répondre
  57. Gyne 3 avril 2013

    C’est ce que je cherchais big thx to you

    Répondre
  58. Toma 11 mars 2013

    Bon, et bien, j’ai trouvé une petite bidouille.
    J’ai crée un deuxième élément « fantome » qui prend la place du premier quand celui ci sort du flux.

    Au cas où certains auraient le problème, voilà l’idée :
    CSS :
    #infoGhost{
    width:100%;
    display:none;
    }

    JS :
    var fixedLimit = $(‘#info’).offset().top;
    $(‘#infoGhost’).css(‘height’, $(‘#info’).height() + ‘px’);
    $(window).trigger(‘scroll’);

    $(window).scroll(function(event){
    if($(window).scrollTop()>= fixedLimit){
    $(‘#info’).addClass(‘fixed’);
    $(‘#infoGhost’).show();
    }else{
    $(‘#info’).removeClass(‘fixed’);
    $(‘#infoGhost’).hide();
    }
    });

    Répondre
  59. Toma 11 mars 2013

    Bonjour,

    Tout d’abord, merci pour ce petit bout de code.
    Petite question tout de fois. Mon élément que je passe en « fixed » n’est pas un élément placé sur le côté de ma page mais bien dans le corps de mon site. Du coup, en le positionnant en fixe et donc en le faisant sortir de mon flux, le scroll se refait automatiquement car la taille verticale de ma page se modifie.
    Et là, j’ai un problème, car lorsque cela se produit, il passe tour à tour dans les deux conditions (à savoir supérieur à la limite, et inférieur ensuite), ce qui ajoute et enlève la classe, et empêche le scroll de ma page. Je ne rencontre pas le problème lorsque la taille de ma page est plus importante mais vu qu’elle est de taille variable, cela peut se produire.

    Je ne sais pas si c’est très clair, et je ne peux pas montrer d’exemple en ligne pour le moment. Mais, quelqu’un aurait une idée pour résoudre ca ?

    Répondre
  60. Aurélien 10 mars 2013

    Bonjour,

    Merci pour le code et le tuto !
    Par contre je n’arrive pas à le faire fonctionner avec wordpress. Une idée pour m’aider ?

    Merci 🙂

    Répondre
  61. Lart-iste 4 mars 2013

    Salut, j’adore ce petit code, mais j’ai un petit problème lors de l’implémentation, les navigateurs bloque sur cette erreur « var positionElementInPage = $(‘#menuprincipal’).offset().top; Uncaught TypeError: Cannot read property ‘top’ of undefined » à tu une idée de la solution ?!

    #menuprincipal.floatable {position:fixed;top:0;}

    // listen for scroll
    var positionElementInPage = $(‘#menuprincipal’).offset().top;
    $(window).scroll(
    function() {
    if ($(window).scrollTop() >= positionElementInPage) {
    // fixed
    $(‘#menuprincipal’).addClass(« floatable »);
    } else {
    // relative
    $(‘#menuprincipal’).removeClass(« floatable »);
    }
    }
    );

    Répondre
  62. Thibaut 28 février 2013

    Merci Mimie, il n’y a plus besoin de publier mon précédent post, j’ai résolu mon problème. J’ai retourné le problème 20 fois et j’avais oublié un règle css…. Frôler le suicide nerveux fait partie des risques du métier n’est-ce pas… Merci encore pour ton script!

    Répondre
  63. Thibaut 27 février 2013

    Bonjour et merci pour ce tuto qui marche à merveille.
    J’aimerais cependant pousser la chose avec 2 menus flottant qui passeraient en fixe l’un après l’autre.
    Par exemple, si l’on prend ton fichier source Mimi, on pourrait imaginer un deuxième texte fixe, plus bas. Quand le scroller arriverait à sa hauteur, le premier texte fixe céderait sa place au second.
    Je suis donc parti sur ce code (qui parait tout simple en théorie) :
    var positionElementInPage1 = $(‘#category1’).offset().top;
    var positionElementInPage2 = $(‘#category2’).offset().top;
    $(window).scroll(
    function() {
    if ($(window).scrollTop() >= positionElementInPage1 && $(window).scrollTop() positionElementInPage1 && $(window).scrollTop() >= positionElementInPage2) {
    // fixed
    $(‘#category1’).removeClass(« floatable »);
    $(‘#category2’).addClass(« floatable »);
    }
    if ($(window).scrollTop() < positionElementInPage1){
    // relative
    $('#category1').removeClass("floatable");
    $('#category2').removeClass("floatable");
    }
    }
    );
    Mais voilà ça ne fonctionne pas. Le premier item réagit parfaitement mais arrivé à la hauteur du second, les 2 sont masqués par le scroller. Pourtant l'inspecteur d'élément me confirme bien que la class "floatable" passe bien de l'un à l'autre… Aurais-je oublié quelque chose? Merci infiniment.

    Répondre
  64. Mimie 5 février 2013

    @benjamin: Il y a pourtant un paragraphe « Sources » avec un exemple en ligne, je ne peux pas faire grand chose de plus …

    Répondre
    • benjamin 6 février 2013

      J’ai bien regardé l’exemple, je dois avoir un conflit quelque part, je n’arrive pas à savoir où ? pourquoi ? comment ? Je vais taché de refaire l’exemple pour vérifier que je n’ai pas fait d’erreur d’inattention. des fois quand je teste un code Jquery il ne marche pas du premier coup, je n’y touche pas et le navigateur le prend bien en compte.. peu que c’est ça.

    • benjamin 6 février 2013

      je viens de faire un copié coller de l’example.. .ça ne marche pas! je ne pige pas là! je vais chercher mais si tu as une idée qui te viendrais n’hésite pas. Merci d’avance.

    • benjamin 6 février 2013

      J’ai mis le code javascript en haut, en pensant que ce la n’influencerait pas l’action et ben si ! dans quel cas il faut mettre le code après la div concernée ?

      J’ai mis le code en bas dans ma page de site.. .quelque chose se passe.. Lorsque je scroll vers le bas la barre de menu ce colle tout de suite en haut de la fenêtre.. le css de la div :

      #breadscrumbs {background-color: rgba(56, 50, 58, 0.8); height:30px; z-index:5; position: relative;}

      j’ai surement de la bidouille à faire. est ce qu’il y a une solution pour que la barre reste comme en position relative, c’est-a-dire, avec un background-color infini, là en position fixed, la largeur est de 960px (mon site) et aligné sur la gauche de l’écran ?

    • benjamin 6 février 2013

      solution pour l’alignement comme en relative :

      width:100%;
      position:absolute;

      j’ai toujours la barre de menu qui se fixe d’un coup tout en haut ;+. j’y retourne

    • benjamin 6 février 2013

      j’ai mis ça : if ($(window).scrollTop() >190) {

      au lieu de : if ($(window).scrollTop() >= positionElementInPage) {

      ça à l’air de marché! je ne suis pas sur que cela soit la bonne solution!

  65. benjamin 5 février 2013

    Bonjour,

    je croise les doigts pour que le post marche encore.. . 😀

    J’ai mis le même code … mais ça ne marche pas. J’ai bien installé j.query (moi c’est la version :jquery-1.8.3.js). j’ai fait les manipes dictées plus haut sans résultats.. .

    Je veux bien un coup de main. .

    Répondre
  66. Internaute-content 13 janvier 2013

    MEEEEERRRRCIIIIIIII !!!!!!!

    Ca faisait des semaines que je recherchais un script de ce genre, et il FONCTIONNE !!!! (en tout cas chez moi 🙂 )

    Merci, merci, merci et encore merci !!!!!!!!!!!!!!!

    Répondre
  67. etienne 3 janvier 2013

    Merci pour l’article qui m’a bien servi aujourd’hui 🙂

    Répondre
  68. Alex 22 décembre 2012

    Bonjour,

    J’aimerais bien l’utiliser mais je n’ai pas de fichier menu.js.
    J’ai un menu nav.menu.js dans mon wordpress , c’est tout 🙁

    Des idées?

    Répondre
  69. linvincible 4 décembre 2012

    c super! ca ma vraiment aide… merci encore une fois!
    ça c’est une façon d’expliquer

    Répondre
  70. Mimie 6 novembre 2012

    Vivedidi, dans l’exemple donné on teste si la scroll masque le menu pour le faire descendre, il faut dans ton cas (qui est aussi le mien sur magicsupremacy) que tu rajoutes la même chose pour ton footer et tester quand la scroll arrive au niveau de ton footer pour ne pas le masquer, quelque chose du genre :

    var hauteurMenu = 30;
    var positionMenu = $('#votre_menu').offset().top;
    var positionFooter = $('#votre_footer').offset().top;
    $(window).scroll(
        function() {
            var scrollTop = $(window).scrollTop();
            if (scrollTop >= positionMenu && scrollTop <= (positionFooter - hauteurMenu)) {
                $('#votre_menu').addClass("floatable");
            } else {
                $('#votre_menu').removeClass("floatable");
            }
        }
    );
    
    Répondre
  71. Vivedidi 26 septembre 2012

    Bonjour, je remonte un vieil article, j’espère avoir une réponse quand même ^^
    J’ai suivi cet article, fait l’installation, fonctionne correctement, sauf que mon menu ne s’arrête pas à la fin du div contenant mon menu (le menu est dans le footer ensuite).
    Je n’ai pas fais de Jquery, mais j’ai quand même tenté des truc en utilisant la position du pied de page, du scroll, ou du bas du menu, mais je n’ai pas encore trouvé.

    Donc si quelqu’un pouvait m’apporter son aide, peut-être est-ce dû au code css.

    Répondre
    • lepachadi 6 novembre 2012

      Bonjour,
      merci beaucoup pour ce post fort utile ! Cependant je suis dans le même cas que Vivedidi, je voudrais que le position fixed que j’ai ne chevauche pas mon footer. Il faudrait donc rajouter une troisième classe (relative 2) avec en css un vertical-align bottom, jusque là ça va. Mais n’étant pas familier du javascript ou du jquery, je n’arrive pas à bidouiller une condition pour déterminer si l’élément est rendu au footer ou non …
      Un peu d’aide serait la bienvenue
      Merci !

  72. Sylvain 31 décembre 2011

    Merci beaucoup ! C’est très clair !

    Répondre
  73. Mimie 30 décembre 2011

    Voilà, section « sources » en bas de l’article.

    Répondre
    • Q 31 décembre 2011

      Les seuls petits defaults que je trouve à redire sont
      Le petit espace qui se cree au top de la balise p qui se regle en la remplacant par une div par exemple.
      Et ce petit saut (de la taille de la fenetre (encore elle)) lorsqu’elle se transforme en floatable et qui recouvre les trois premiére ligne du texte en dessous
      J’essaye de regler sur ma page test http://carrecarre.com/newindex2.php encore 5 minutes et je vais prendre une coupe de champagne.

      merci pour l’aide et l’article.

    • Q 31 décembre 2011

      j’ai bidouillé un truc, mais il doit y avoir tellement plus simple
      (voir: http://carrecarre.com/newindex2.php)

  74. Mimie 30 décembre 2011

    D’accord, je vais essayer de vous faire ça dans la journée, je vous tiens au courant.

    Répondre
    • Q 30 décembre 2011

      et bien je pense que nous attendons ca avec impatience.
      merci du temps accordé

  75. Sylvain 21 décembre 2011

    Bonjour,

    Pourriez-vous créer un fichier d’exemple simple téléchargeable ? votre menu semble en effet très intéressant mais l’explication n’est peut-être pas très claire pour un « amateur » (comme moi).

    Merci !

    Répondre
    • Q 30 décembre 2011

      je suis preneur aussi, j’aimerais bien arriver à le faire.

  76. Valentin 15 novembre 2011

    Merci !
    Bonne continuation à vous !

    Répondre
  77. Mimie 15 novembre 2011

    Une bonne chose de faite, bonne continuation.

    Répondre
  78. Valentin 15 novembre 2011

    Je me suis creusé la tête longtemps… longtemps…
    J’avais mal paramétré mon fichier css du coup il croyait que mon menu commencer tout en haut de la page. J’ai décalé mon menu et tout est rentré dans l’ordre !

    Répondre
  79. Mimie 15 novembre 2011

    $ est une fonction jQuery, il semblerait donc que tu pointes sur un fichier jQuery non disponible, le navigateur n’arrive pas à télécharger la bibliothèque jQuery, creuse de ce côté là peut-être.

    Répondre
  80. Valentin 15 novembre 2011

    $ is not defined
    menu2.js()menu2.js (ligne 1)
    [Stopper sur une erreur] var positionElementInPage = $(‘#menu’).offset().top;

    Voila ce que ça me donne sous firebug. Elle est peut être là l’erreur mais je la comprend pas.

    Répondre
  81. Mimie 14 novembre 2011

    Non ce n’est pas pareil :
    – « #menu .ok » signifie l’élément dont la classe est « ok » et dont un de ses éléments parent possède un identifiant « menu »
    – « #menu.ok » signifie l’élément dont l’identifiant est « menu » et dont la classe est « ok »

    Essaie de débugger avec Firebug sous Firefox, tu dois avoir une erreur quelque part.

    Répondre
  82. Mimie 14 novembre 2011

    @Valentin : 2 pistes pour ton problème :
    1/ dans ton css tu as mis « #menu .ok » au lieu de « #menu.ok » (aucun espace)
    2/ essaie ensuite de charger le fichier menu.js en bas de page, juste avant le </body>

    Répondre
    • Valentin 14 novembre 2011

      Pour le point numéro 1, j’ai essayé mais ça ne change rien (et je pense que c’est pareil en css), et pour le point numéro 2 … c’est pareil !!
      Ça m’embête mon histoire !

  83. Valentin 14 novembre 2011

    Envoyé !

    Répondre
  84. Mimie 14 novembre 2011

    Etrange, envoie-moi un zip avec ton code si tu veux, je prendrai le temps de regarder ce que tu fais.

    Répondre
  85. Valentin 14 novembre 2011

    Merci beaucoup, effectivement je l’avais oublié.
    Mais ça n’a absolument rien changé, je ne comprends pas !

    Répondre
  86. Mimie 14 novembre 2011

    Bonjour Valentin, déjà il faut que tu saches si tu inclus bien la bibliothèque jQuery, si ce n’est pas le cas voici la ligne à rajouter dans ton head :

    <script type= »text/javascript » src= »http://code.jquery.com/jquery-1.5.2.min.js »></script>

    Retente avec ça on sait jamais.

    Répondre
  87. Valentin 13 novembre 2011

    Bonjour,

    Je souhaite utiliser ce code pour mon site mais je suis incapable de le mettre en pratique.
    Je n’ai pas de connaissance en javascript car je n’ai pas le temps d’apprendre pour le moment.
    Ce que je fais :
    – Dans mon css, j’ai deux fois mon menu (un avec « #menu » et l’autre « #menu.floatable »),
    – Dans mon html j’ai une balise
    – Et dans menu.js j’ai ce que vous avez écrit (var …blablabla )
    Mais voilà, ça marche pas !
    La raison est sûrement évidente mais je ne la vois pas.
    Merci pour votre aide !

    Répondre
  88. Houssen' 28 octobre 2011

    C’est pile ce que je recherchais,
    infiniment : Merci 😉

    Répondre
  89. Mimie 20 octobre 2011

    +1, tous les détails comptent 😀

    Répondre
  90. Greg 20 octobre 2011

    Sympa l’effet en pratique, en effet 🙂

    Répondre

Leave a Reply

Annuler la réponse

Barre latérale principale

Ne ratez pas un article
Nom : 
Email :*
Please wait...
Please enter all required fields Click to hide
Correct invalid entries Click to hide
Aucun spam. Recevez nos articles par Email

A lire aussi

liste des meilleurs hentai non censures

Ma liste : Quel est le meilleur hentai non censure ?

Publié le 10 mars 2022

gibiru moteur de recherche anonyme

Quel moteur de recherche sans censure ?

Publié le 7 mars 2022

Pages utiles

  • Les auteurs du blog
  • A propos
  • Blog
  • Mentions légales
  • Plan du site
  • Contactez-nous
nordvpn-banniere-perso-350

Footer

À propos

Vous êtes surveillé. De multiples organisations privées et publiques surveillent et enregistrent vos activités en ligne.

DesGeeksetdeslettres.com fournit des outils et des connaissances pour protéger votre vie privée contre la surveillance massive mondiale. Ce blog anime depuis 2009 une communauté florissante d'individus soucieux de la protection de la vie privée et s'informe au jour le jour des nouvelles avancées en matière de protection de vos données en ligne.

Notre but : rechercher et recommander les meilleures solutions logicielles pour notre communauté.

→ The Pirate Bays : solutions et sites miroir pour y accéder

La transparence

La transparence est notre plus grande valeur et c’est ce qui nous distingue du reste de la communauté. Les modifications rédactionnelles apportées à ce blog et aux produits que nous recommandons sont toujours discutées dans la section des commentaires, grâce au formulaire de contact ou encore via nos réseaux sociaux comme Facebook ou Twitter.

Ce blog tient à remercier les centaines de lecteurs, contributeurs et vérificateurs de faits qui s’assurent que nos recommandations sont solides et fiables.

De même, nous ne pourrions rien faire sans nos entreprises affiliées ainsi que les membres de la communauté qui aident à partager nos nouvelles et à faire passer le mot. Je vous remercie du fond du coeur!

Recherche

Articles les plus populaires

  • Kickasstorrent : Connexion et téléchargement
  • RARBG Torrent : Proxy, Miroirs et Alternatives
  • 10 méthodes comment pirater un compte Netflix
  • Où trouver les meilleurs torrents de musique ?
  • Accéder à French Stream malgré la censure
  • Comment regarder Retour à l’Instinct Primaire non censuré

© DES GEEKS ET DES LETTRES blog français depuis 2009 Facebook Twitter Pinterest Newsletter

Desgeeksetdeslettres.com est un site web à vocation populaire qui fournit des informations pour protéger la sécurité et la confidentialité de vos données.

Ne confiez jamais votre vie privée à une entreprise, chiffrez toujours vos données.