[Résolu] Menu fixe et ensuite flottant (soucis de marge)

Bonjour,

Je souhaite que lorsque le menu se trouve en haut de la page, alors il devient fixe.

J'ai juste un souci de marge,
Je souhaiterais que le menu devienne fixe, à environ 50px du haut.

Voici mon code:

	<style type="text/css">
		#ribbon-navigation {
			padding: 50px;
			padding-top: 10px;
			width: 950px;
		}
		
		#ribbon-navigation.floatable {
			margin-top: 50px;
			position: fixed;
			top: 0px;
		}
	</style>

<nav>
				<div id="ribbon-navigation">
				    <ul class="top-level">
				        <li><a href="#" class="selected">Présentation</a></li>
				        <li><a href="#">En image</a></li>
				        <li><a href="#">Le mot du proviseur</a></li>
				        <li><a href="#">Administration</a></li>
				        <li><a href="#">Vie des élèves</a></li>
				        <li><a href="#">Les instances</a></li>
				    </ul>
				</div>
</nav>

Et le js

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	
	<script type="text/javascript">
		// listen for scroll
		var positionElementInPage = $('#ribbon-navigation').offset().top;
		$(window).scroll(
			function() {
				if ($(window).scrollTop() >= positionElementInPage) {
					// fixed
					$('#ribbon-navigation').addClass("floatable");
				} else {
					// relative
					$('#ribbon-navigation').removeClass("floatable");
				}
			}
		);
	</script>

J'aimerais juste ajouter une marge en haut de 50px...
help

Hello !
Ça semble normal que ton script ne fonctionne pas car tu observe la postion (top) de ton élément #ribbon-navigation dans positionElementInPage et en fonction du scroll du navigateur tu agis sur la position de ce même élément , du coup tu ne peux plus l'observer de nouveau car celui-ci a déjà changé.
Tu devrais mettre une valeur fixe ou du moins qui ne changera pas à positionElementInPage comme par exemple :

var positionElementInPage = 50;

Merci beaucoup pik_at, je viens de voir ton message.
Ca marche nickel!

D'ailleurs, je suis allée jeter un coup d'oeil à ton site.
Très joli!