jQuery & WordPress – Une sidebar flottante

Il arrive parfois que le contenu d’une page soit long et que votre molette de souris chauffe à force de faire des allez-retours pour pouvoir accéder aux éléments de la sidebar.

Une manipulation très simple vous permet en CSS de fixer cette sidebar afin qu’elle soit toujours visible à l’écran. Mais ce n’est pas suffisamment swag pour votre site alors nous allons-y ajouter un effet de décalage, en utilisant la fonction animate de jQuery.

Tout d’abord, nous n’allons pas agir sur le CSS. Le jQuery fera tout le travail, ça évite les possibles problèmes de compatibilité.

Le principe du petit bout de code que nous allons voir est simple.  A chaque coup de molette, le code comparera la position du haut de la fenêtre par rapport à la position de notre sidebar. Tant que le haut de la fenêtre dépasse le haut de la sidebar, la marge du haut de la sidebar est décalée d’un nombre égal à la position du bord de la fenêtre – la position du bord de la sidebar.

Ce décalage se fait évidement en douceur en l’incluant dans un effet animate.

Enfin, pour faire les choses bien, nous allons ajouter à l’équation une troisième valeur qui empêchera la sidebar de venir se coller sur le bord haut de la fenêtre.
Et suite à la suggestion d’un de nos lecteurs, nous allons inclure également un test de longueur de la sidebar qui va couper tout ce qui dépasse 🙂 et le remplacer par une barre de déroulement.

$(function() { var elmt = $("#sidebar"); // L'élément "sidebar" stocké dans une variable var offset = $(elmt).offset(); var paddingTop = 150; // A adapter selon vos envies, ici 150px fixe la sidebar à 150px par rapport au haut de la fenêtre. var windowHeight = $(window).height(); // Capture de la hauteur du viewport if ($(elmt).height() > windowHeight) { $(elmt).css('overflow' , 'scroll'); $(elmt).css('height', windowHeight-paddingTop-15  'px'); } $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $(elmt).stop().animate({ marginTop: $(window).scrollTop() - offset.top   paddingTop },"linear"); } else { $(elmt).stop().animate({ marginTop: 0 },"linear"); } }); });

Explications :

• offset reprend tout les décalages de l’élément sidebar. Donc offset.top correspond au décalage haut de l’élément #sidebar
• paddingTop reprend le décalage ajouter en plus de celui calculé

Remplacer l’id #sidebar par l’ID ou la classe de votre bloc et le tour est joué.

N’oubliez pas d’insérer jQuery avant ce code et la sidebar doit être en float:right;

Vous pouvez jouer sur l’animation en ajoutant un paramètre temps et sur le easing dans les fonctions animate :

Paramètre temps :

$("#sidebar").stop().animate({ ... }, 200);

Easing :

$("#sidebar").stop().animate({ ... }, "linear");

Vous pouvez télécharger le thème joint à cet article et l’installer comme un nouveau thème WordPress pour tester le tutoriel en démo.