menu qui se fixe lors d'un scroll

[JoP]

Bonjour à tous,

J'espère que vous allez tous bien. J'aimerais savoir s'il est possible de faire en sorte que mon menu (qui s'affiche horizontalement) reste bloqué dans le haut de la page (pour qu'il soit toujours visible) et que le reste de la page défile dessous..

Merci d'avance à tous!

[Noaric]

Bonjour,

typiquement tu peux faire cela en utilisant les frames, après je sais qu'il n'est pas forcément bien perçu de les utiliser, il y a peut être un autre moyen de faire...

[captain_torche]

Tu devrais pouvoir le garder au même endroit avec les CSS, en jouant sur "position: fixed;".

[Freakz]

Bonjour, j'espere que je suis pas en necro-post.

Les deux réponses précédentent ont leurs pour et contre, mais dans les deux cas fonctionnent.

Les frames : Assez depreciées du majeur public, difficultés de référencements, Problemes avec certains navigateurs

Css (-fixed) : Ca sautille, en gros, quand tu defiles, ton menu suit mais ce n'est pas fluide.

Il est vrai que trouvé un compromis n'est pas facile, cependant une réponse m'interesserait.

Je sais que des menus fixes ca existe et il en a des très biens réalisés sur certains sites populaires. Si quelqu'un pouvait éclairer notre lanterne...

[captain_torche]

Je n'ai jamais eu de souci de sautillement avec le CSS fixed. Tu as des exemples ? Il me semble toutefois que certaines solutions JavaScript (qui cherchent à masquer l'ignorance des CSS du webmaster), génèrent quant à elles effectivement ce que tu décris.

Et sinon, qu'est-ce que le necro-post ?

[Freakz]

Et sinon, qu'est-ce que le necro-post ?

J'appelle necro post un post dont la date d'ouverture est lointaine, et un necroposteur est une personne qui post alors que le topic n'est plus d'actualité et donc mort.

J'étais persuadé que c'était en CSS que mes menus sautillaient, mais maintenant que tu le dis c'était peut etre en JS, je vais aller tester ca...

[captain_torche]

Non, ne t'inquiètes pas, tu n'est donc pas nécrophile : il faut plus d'une semaine pour qu'on considère qu'un post est à l'abandon.

De plus, si tu réveilles un vieux sujet en y ajoutant quelque chose de pertinent, tu n'auras pas non plus de souci.

[Dudu]

Salut

Je confirme qu'utilisant souvent position:fixed, je n'ai aucun problème ni de sautillement, ni de manque de fluidité.

C'est sûr qu'en utilisant une solution JS + un navigateur moisi (typiquement, Internet Explorer) pour faire des parties fixes, ça peut moins bien se passer; éventuellement un sautillement, oui.

Sinon non.

[JoP]

Merci à tous, mais ce n'est pas exactement ce que je recherche.. je me suis peut-etre mal expliqué: quand la page est affichée, mon menu n'est pas en haut complètement de la page.. ce que je veux, c'est que lorsqu'on défile la page, qu'il monte jusqu'en haut et qu'il se fixe pour ne pas disparaitre de sorte à ce qu'on puisse toujours voir le menu, peu importe ou on est rendu dans la page...

Je sais que Google Video fait ca.. quand on visionne une vidéo et que l'on fait défiler la page, le lecteur vidéo bloque lorsqu'il atteint le haut de la page..

Merci encore!

[captain_torche]

Dans ce cas, JavaScript va être indispensable.

Dans le principe, il va falloir détecter la position de ton affichage par rapport au haut de la page. Si cette position est supérieure à l'emmplacement de ton menu, il faudra le déplacer de la différence.

[captain_torche]

Je viens de te bidouiller une fonction en jQuery :

function scroll_item(id) {
	//	On calcule la position de base de l'élément
	if(typeof(tab) == 'undefined')
		tab = new Array;
	if(typeof(tab[id]) == 'undefined') {
		pos			=	$('#'+id).position();
		tab[id]		=	pos.top;
	}

	//	On calcule ensuite la position du scroll
	var screenpos	=	window.pageYOffset;

	$('#'+id).css('position', 'relative');
	//	Si le scroll est supérieur à la position initiale de l'élément, on décale celui-ci, sinon on le remet à sa position initiale
	if(screenpos > tab[id])
		$('#'+id).css('top', screenpos+'px');
	else
		$('#'+id).css('top', '0px');
}

Pour la faire fonctionner, il faut tout d'abord télécharger et appeler les fonctions de base jQuery sur ton site : http://jquery.com/

Il faut ensuite lancer la fonction lors du scroll de la page :

$(document).ready(function() {
	$(window).scroll(function() {
		scroll_item('id_de_ton_menu');				
	});
});

Tu personnaliseras bien entendu l'appel de la fonction avec l'id de ton menu.

[Leonick]

Tiens, voilà un exemple en css http://www.champignytriathlon.org avec, en plus, un menu déroulant, le tout en full css (sauf ie6 où il fallait un hack)