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.
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…
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 ..
Effectivement jQuery est chargé bizarrement, remplace les $ par jQuery dans ton script que tu viens de déplacer.
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 ?
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 …
Je ne vois pas ton code, par contre je suis sur ton blog, je regarde et te redis si je trouve l’erreur
;D
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 ! 😉
Ah, et Vydja = Diane ! Scuse, je me suis emmêlée les pinceaux dans mes pseudos.
c’est en réponse à Vydja. Diane, il faudrait que je puisse voir ton code…
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 ?
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 !
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 🙂
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
ok, Merci beaucoup Benjamin 🙂 🙂
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…
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
🙂
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
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.
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
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 🙂 🙂
Merci pour ta réponse, Mars.