Fixer une div à un moment du scrolling.

Bonjour !
Je cherche à savoir comment faire pour qu'une div à un moment donné du scrolling soit fixed
Voici un exemple, comme la partie partage de cet article sur le site The Next Web.
A un moment donné lorsqu'on défile, la div est arrtibuée avec la

class="fixed"

, et

position:fixed

. Tandis qu'avant elle avait une

class="clearfix"

...

Voilà, j'aimerai savoir comment faire ceci.

Merci.
Modifié par PHP (16 Jun 2013 - 15:00)

salut,
tu dois passer par JS et calculer le scroll actuel du navigateur.

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/