Fixer la position du sidebar avec fixedcontent.js (comme sur Facebook)

fixedcontent

Le plugin jQuery fixedcontent fixe le contenu (barre latérale, nav, etc.) pendant le défilement de la page, typiquement c’est le même principe que la colonne de droite de la version desktop de Facebook.

À part les options du plugin : margintop, minWidth, z-index, qu’on traitera un peu plus bas, on a remarqué une fonctionnalité assez intéressante.
Si la hauteur de votre « sidebar » est plus longue que la hauteur du contenu de votre page alors le plugin sera désactivé automatiquement afin que rien ne soit coupé. 

Et si la page est rafraîchie, le contenu fixe restera dans sa position initiale, même si la page a changé de position. 

Initialisation du plugin

Télécharger jquery.fixedcontent.min.js  et l’inclure dans votre page tout en faisant attention de ne pas oublier de déclarer jquery avant :

Puis pour une utilisation standard, il suffit d’attribuer la classe .js_fixedcontent sur le sidebar à fixer comme ceci :

Les options du plug-in

Comme on a cité plus haut, le plugin possède des options afin de personnaliser l’affichage :

MarginTop

MarginTop permet de définir un espacement entre la fenêtre et le sidebar. Elle ne change pas même si on fait défiler la page.
Elle se définit en pixel, par défaut sa valeur est de 24 (px).

minWidth

Min-width met en place une condition afin de désactiver le plugin sur les supports mobiles ou des petits écrans, cela empêchera le chevauchement du contenu.
 Sa valeur par défaut est de 767 (px).

Z-index

La valeur par défaut est 500, mais une valeur personnalisée peut être définie si nécessaire.

Répondre