[Résolu] Menu Fixe qui suit pas vraiment

Hello

J'ai un menu vertical qui se fixe au scroll de tel manière

	<div id="id_menu_flottant" class="menu_flottant">
		<div class="header_menu_flottant">
		<font color="white"><b>GO</b></font>
		</div>
		<div class="content_menu_flottant">
			<ul style="font-size:11px">
				<b class="ul_titre_menu_flottant">Marché</b>
				<li><a href="#id_link_marche_add">Ajouter</a></li>
				<li><a href="#id_link_marche_modifier">Modifier</a></li>
				<li><a href="#id_link_marche_suppr">Supprimer</a></li>
				<b class="ul_titre_menu_flottant">Sous-marché</b>
				<li>Ajouter</li>
				<li>Modifier</li>
				<li>Supprimer</li>
				<b class="ul_titre_menu_flottant">Rubrique</b>
				<li>Ajouter</li>
				<li>Modifier</li>
				<li>Supprimer</li>
			</ul>
		</div>
	</div>

et celui ci fixe via jquery

	$(window).scroll(function () {
		$(window).bind('scroll', function () {
			if ($(window).scrollTop() > 150) {
				$('#id_menu_flottant').addClass('fixed');
			} else {
				$('#id_menu_flottant').removeClass('fixed');
			}
		});
	});

cela marche, mais lorsque je clic sur un lien (qui me redirige vers une div lointaine (en bas de la page)) le menu ne suit pas ! j'image que c'est parce que j'ai pas vraiment scroll (molette ou autres).

Comment résoudre cela ?

Merci à vous

Par contre, si j'ai scroll ne serais ce qu'une fois, là sa marche..

Le problème est présent uniquement au chargement de la page, si j'ai pas du tout toucher au scroll...

$(window).scroll(function () ...

Si tu scroll pas, la fonction n'est pas lancée.

Oui ça javais bien compris

après ma question n'est pas de savoir d'où vient le problème, mais comment le résoudre

EDIT : y'a t-il par exemple, un moyen permettant de détecter si la bar de scroll à bouger ? parce que la barre de scroll bouge quand je clic sur mon lien. donc en théorie le scroll est déclencher.
Modifié par JENCAL (01 Jul 2015 - 16:27)

Concernant le scroll pour aller à une section tu as laissé le comportement natif ou tu as fait un smooth scroll en JQuery ?
Modifié par _laurent (01 Jul 2015 - 16:40)

natif mais j'ai regardé vite fait pour smooth scroll... c'est vrai que c'est plus "aguicheur"
Modifié par JENCAL (01 Jul 2015 - 16:43)

Si tu met uniquement :

$(window).bind('scroll', function () {
			if ($(window).scrollTop() > 150) {
				$('#id_menu_flottant').addClass('fixed');
			} else {
				$('#id_menu_flottant').removeClass('fixed');
			}
		});

Le "bind" du scroll se fera dans tout les cas. Ensuite est-ce que le clique et déplacement de la fenêtre est considéré comme un "scroll" ? Je ne peux pas l'affirmer. Je te laisse le tester.

Perso sur un de mes projets j'utilise le smooth scroll.

Il est bien plus simple de définir un menu fixed en CSS.

Exemple :

nav {
	position: fixed;
	top: 0;
	right: 0;
}

Et c'est tout.

La position du menu est fixe par rapport au viewport, le navigateur n'a aucun calcul de position à faire.

<font color="white"><b>GO</b></font>

Au passage, l'utilisation d'attributs de mise en forme HTML et une pratique totalement déconseillée.

Bonne continuation.
Modifié par thierry (04 Jul 2015 - 16:00)

Oken a écrit :


Perso sur un de mes projets j'utilise le smooth scroll.

Je vais tester cela

thierry a écrit :
Il est bien plus simple de définir un menu fixed en CSS.

[...]

La position du menu est fixe par rapport au viewport, le navigateur n'a aucun calcul de position à faire.

<font color="white"><b>GO</b></font>

Merci Thierry, le problème n'est pas de créer un menu fixe, qui est très simple en soit.

En faite mon menu est a 15 % du top au chargement de la page, et ensuite lorsqu'on scroll au moment où celui ci "touche" le top , il le suit à 1 voir 2 % (d'ou le addclass en jquery) !

Cela marche ! pas de problème !

le problème initiale est que dans ce menu j'ai des liens et lorsque, après le chargement de la page uniquement, je clic sur un lien le menu ne suis pas.

thierry a écrit :
Au passage, l'utilisation d'attributs de mise en forme HTML et une pratique totalement déconseillée.

Bonne continuation.

Euh.... peux tu m'en dire un peu plus sur ça ? " attributs de mise en forme " .. tu parle du font size ? de la balise <b> ?

merci
Modifié par JENCAL (02 Jul 2015 - 10:22)

Oken a écrit :

Perso sur un de mes projets j'utilise le smooth scroll.

voila j'ai la solution grâce au smooth scroll je te remerci

$(window).scroll(function () {
		$(window).bind('scroll', function () {
			if ($(window).scrollTop() > 150) {
				$('#id_menu_flottant').addClass('fixed');
			} else {
				$('#id_menu_flottant').removeClass('fixed');
			}
		});
	});
	
	$(document).ready(function() {
		$('.cl_a_menu_flottant').click( function() {
			var rub = $(this).attr('href');
			var speed = 750;
			$('html, body').animate( { scrollTop: $(rub).offset().top }, speed ); 
			return false;
		});
	});

Merci
Modifié par JENCAL (02 Jul 2015 - 10:36)