Fixer une div à un moment du scrolling.

Bonjour.

J'ai utilisé cette fonction récemment sur plusieurs sites.

Voici la solution que j'avais trouvée sur le web. Dans mon cas, j'ai un header de 187 px de haut qui peut (doit) disparaitre en scrollant, et dessous une div "gauche" dans laquelle est le menu et qui doit rester visible.

     <script type="text/javascript">
	$(function(){
	$(window).scroll(
	function () {//Au scroll dans la fenetre on déclenche la fonction
	if ($(this).scrollTop() > 187) { //si on a défini de plus de 187 px du haut vers le bas
	$('#gauche').addClass("fixgauche"); //on ajoute la classe "fixgauche" à <div id="gauche">
	} else {
	$('#gauche').removeClass("fixgauche");//sinon on retire la classe "fixgauche" à <div id="gauche">
						}
					}
				);			 
			});
		</script>

et dans ma feuille de style :

.fixgauche{
				z-index: 9999;
				position: fixed;
				top: 0;
				/* Mise en forme */
				width: 270px;
			}

(Depuis une mise à jour IE10, ça m'affiche bizarrement le code affiché ici, j'espère que ce sera plus lisible dans un autre navigateur.) EDIT : je te confirme que le code s'affiche mieux sous d'autres navigateurs.)
Modifié par themadwizard (04 Jul 2013 - 11:16)

Bonjour,

Merci @themadwizard pour ton code !

Par contre il y a une chose qui m'échappe totalement !

Ton code fonctionne à merveilles sous :
- Chrome
- Chromium
- IE
- Safari

Mais il ne veut rien savoir sous :
- Mozilla

Quelqu'un à une solution ou une explication à ça ?

un plugin magique qui s'occupe de tout, tu s'occupes de rien...
http://stickyjs.com/