Fixer un module Joomla avec JQuery Stickit

On nous demande parfois comment nous avons fait pour "bloquer" la colonne de droite (oui, celle-là, juste à droite de cet article, sauf si vous êtes sur mobile bien sûr) au scroll de sorte qu'elle reste visible même quand on parcourt un long article. Lorsque vous arrivez tout en bas de la page, la colonne reprend sa place "normale" dans le flux et remonte tranquillement sans se superposer à votre footer.

C'est une astuce plutôt sympa pour assurer la visibilité de vos partenaires, sponsors, pubs, etc.

Affix ?

Pour ceux qui connaissent, c'est un fonctionnement assez proche du Affix de Bootstrap v3 et il doit être possible d'obtenir ce résultat avec Affix si vous le maîtrisez.

Problème, si vous utilisez Joomla, il y a de fortes chances que vous embarquiez Bootstrap v2, à cause des problèmes de compatibilités entre Joomla et Bootstrap v3. Bootstrap v2 inclue bien une version d'Affix, mais dans une version un peu limitée par rapport à celle de la v3.

Quant à Bootstrap v4 (encore en beta à l'heure où nous écrivons ces lignes), à supposer que Joomla 4 l'intègre, ce qui reste à voir, Affix n'en fera même plus partie.
Bootstrap recommande de le remplacer par la propriété CSS position: sticky. Sauf que celle-ci n'est pas encore bien supportée par les navigateurs, c'est le moins que l'on puisse dire (et c'est bien dommage parce qu'elle est excellente !).
Un polyfill alors, en attendant ?

Bon, ça commence à être un peu compliqué. Est-ce qu'il n'existerait pas plus simple ?

La solution : jQuery Stickit

Pour obtenir ce résultat, une solution super simple s'appelle Stickit.
C'est un plugin jQuery donc assurez-vous d'avoir une version de jQuery sur votre installation. Au besoin, ajoutez-le à l'aide du plugin jQuery Easy d'Olivier Buisard.

Vous pouvez télécharger la dernière version de Stickit sur le GitHub du projet, en version compressée idéalement. N'oubliez pas de modifier l'extension (.txt --> .js).

A l'aide de votre client FTP, déposez le fichier jquery.stickit.min.js dans le répertoire /templates/-votre-template-/custom/js/
Vous pouvez le créer s'il n'existe pas.

Dans Gantry / votre template / Base Outline / Page Settings, ajoutez un asset Javascript en cliquant sur le bouton +.
Appelez-le par exemple "Stickit".

gantry assets

Dans File Location, allez chercher votre fichier sous /custom/js/

Dans Inline Javascript, copiez le code suivant :

jQuery(document).ready(function() {
    jQuery('#g-aside').stickit();
});

Selon votre template, remplacez #g-aside par un sélecteur CSS adapté à l'élément que vous souhaitez bloquer au scroll.

Notez que le code ci-dessus est légèrement modifié par rapport à celui que vous trouverez sur GitHub car il faut tenir compte du contexte jQuery NoConflict de Joomla. A vérifier et adapter selon votre contexte.

sticky code

Validez en cliquant Apply and Save.

C'est fini !

Notez que le plugin dispose de nombreuses options pour ceux qui veulent personnaliser son fonctionnement ou l'adapter à leur situation particulière. Se référer à la documentation sur GitHub.

Amusez-vous bien et n'hésitez pas à nous faire un retour dans les commentaires.

L'auteur : un expert à votre service