Javascript – Comment fixer un menu au scroll de la page
Bonjour à tous ! Aujourd’hui je vous présente une façon de fixer un menu au défilement de la page en javascript. J’ai voulu le faire il y a déjà un moment et j’ai donc fait quelques recherches et voilà la solution que j’ai trouvé. (cette solution est intégrée à technews.fr :)
Le principe
Le principe du code javascript consiste à écouter le scroll de la page. Quand le niveau de scroll atteint un élément en particulier (ici le menu) on peut déclencher une action, par exemple ici l’ajout d’une classe CSS à notre menu et ainsi on retire cette classe lorsque le scoll est inférieur au menu.
Implémentation
J’ai fait une page très simple juste pour visualiser le principe de la fixation. Il faut bien penser à inclure JQuery pour que cela fonctionne ;)
Voici le code HTML CSS et JS de notre page.
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
Du contenu
J’espère que ce code pourra en aider parmi vous. Si vous avez des questions, les commentaires sont là pour cela ;)
A ne pas oublier :
$( window ).resize(function() {
positionElementInPage = $(‘#menu’).offset().top;
});
Oui, merci ! Je le rajoute ;)
impeccable, on ne peut plus clair, merci ;)
Merci beaucoup ca marche ! (enfin presque..)
étant donné que le #menu devient en position fixed, ses dimensions ne s’adapte plus par rapport à son element parent mais au body, et donc se décale par rapport à la position initiale… apres avoir bidouiller mon code pendant 3 heures je viens désespéremment à la recherche d’une solution ^.^
Salut Tony, je pense que dans la classe fixedTop qui est ajoutée tu peux ajuster sa position.
j’ai essayé par différents moyens, mais je ne comprend pas… la largeur n’est pas dutout pris en conte lorsque mon header est fixé et est modifiée..
Essai de mettre la largeur dans ton .fixHeader en important :
width: 50% !important;
Well done ! merci bcp
Bonjour je cherche à fixer un menu bootstrap au scroll top exactement comme avec le code que vous avez partagé mais je bloque!!!! Comment je pourrai faire svp??????
Bonjour
Ce type de menu peut il être appliqué sur Blogger?
Merci