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
⇒ Changez votre adresse IP et accédez aux contenus bloqués ou géo-restreints partout dans le monde
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.
Visitor Rating: 5 Stars
Visitor Rating: 5 Stars
Visitor Rating: 5 Stars
Visitor Rating: 4 Stars
Visitor Rating: 5 Stars
Visitor Rating: 5 Stars
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 🙂
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.
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.
Merci beaucoup! Le fichier source clarifie les choses en tout cas pour un novice comme moi.
merci
Bonjour,
sur mon pc votre exemple ne fonctionne pas dans chrome, ni dans chromium, ni dans waterfox. Seulement dans Edge.
Cordialement.
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.
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 !
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 !
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.
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,
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???
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.
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!!!
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
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 ?
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
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 ?
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
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
Exactement ce que je cherchais ! 🙂
Merci
tu dois mettre tes pixels à la place de « positionElementInPage »
Ok,,merci, mais le soucis c’est que je ne sais absolument pas où placer ce 30 px !
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.. 😉
ahah c’est la meilleure 😀 peace
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…
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…
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, ++
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.
C’est dans l’article, bloc Code, partie CSS … vous abusez là
tu peux me montrer ta class floatable ?
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; )
Enfin si, le changement est que le menu n’est plus fixe.
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…