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

Photo of author
Écrit par Mimie

Se sentir libre de concilier "vie privée" et "vie numérique" sans intrusion.

Ma page Facebook

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

2 astuces pour améliorer votre anonymat en ligne

1/ Pensez à l'utilisation d'un VPN : une application VPN va changer votre adresse IP pour simuler celle de n'importe quel pays. Vous pourrez donc accéder à n'importe quel contenu, même celui qui est géo-restreint. Ce logiciel chiffre aussi votre trafic internet pour éliminer les malwares et les risques de piratage.
2/ Pensez à utiliser un gestionnaire de mots de passe : Il va enregistrer vos mots de passe (compliqués) pour les insérer automatiquement pour vous, et il peut vous générer des mots de passe compliqués aléatoires (versions déclinables pour téléphones et ordinateurs).
L'offre NordVPN cumule les 2 avantages

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.

Catégories Web

Maquillez votre adresse IP

Être anonyme sur internet

nouvelle banniere maison nordvpn

 

Quelques items de Diablo 3 et l’attaque de Torchlight 2

Greg : mon absence pour un mois

 

114 réflexions au sujet de “Menu fixe mais flottant selon la scrollbar (JS + CSS)”

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

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

  12. Bonjour,

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

    Cordialement.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  38. 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; )

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

Laisser un commentaire

Lancez votre recherche

Recherchez sur notre site

Nos réseaux sociaux

Nous rejoindre sur Facebook

Nous rejoindre sur X

Nordvpn bannière maquiller votre adresse ip

© 2024 Des Geeks et des lettres

Qui sommes-nous Mentions légales Contact

Publicité & rémunération du site

  • En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
  • @Agréé Partenaire NordVPN. NordVPN et autres applications VPN ne sont destinées qu'à des usages légaux.