[JS] Stickymojo – sidebar collante en jQuery

Stickymojo est un plugin jQuery permettant de figer dynamiquement votre menu / sidebar pour qu’elle suive comme il faut le scroll de votre navigateur.

Contrairement à un positionnement en absolute ou fixed qui va souvent dépasser sur le footer ou d’autres zones où l’on aimerait que la sidebar s’arrête, le plugin permet de définir les zones autorisées pour le scroll.

Comment ça marche concrètement ? Dans un premier temps, vous devez designer une architecture HTML comme celle-ci:

<div id="wrapper">
	<div id="sidebar">
		<p>sidebar</p>
	</div>
	<div id="main">
		<p>main</p>
	</div>
	<div id="footer">Footer</div>
</div>

C’est la div sidebar qui va être collante.

On défini ensuite un peu de CSS pour la mise en forme etc.

body {
	margin:0;
	padding:0;
}
#main {
	width:750px;
	height: 750px; /*can be anything, just should make sure it is taller than the sidebar*/
	padding: 25px;
	float: left;
	background-color: #fafafa;
}
#sidebar {
	width: 120px;
	background-color: #ccc;
	min-height: 200px;
	margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
	padding: 15px 10px;
	float: left; /* float right for a right aligned sidebar */
}
#footer {
	width: 940px;
	clear:both;
	background-color: #ccc;
	height: 500px;
	margin-top: 100px;
}
#wrapper {
	width: 940px; /* MUST HAVE WIDTH SET, should be the sidebar width + main width */
	margin-left: auto;
	margin-right: auto;
}

Et enfin, on initie le plugin en spécifiant les différents éléments pour gérer les « collisions »:

$(document).ready(function(){
	$('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});
});

Et voilà, vous avez à présent une sidebar qui colle à gauche de votre contenu principal et qui s’arrête avant votre footer, quelque soit votre scroll. Pratique !

Source