jQuery_logo_color_onwhite

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 lecteur, 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");

jQuery - Sidebar flottante

Thème de démonstration pour faire flotter une sidebar sous WordPress via jQuery.

Taille : 33,8 KiB  •  Date : 14 septembre 2013 •  Hits : 839

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.

7 commentaires

  1. Excellente idée, mais… comment atteindre les items du bas de la sidebar, qui disparaissent quasi instantanément lors du scrolling ?

    1. Excellente question. Et à vrai dire, j’y avais pas pensé :
      - Tu n’applique pas ce procédé.
      - Tu applique un overflow:scroll; sur le conteneur de la sidebar en appliquant une hauteur définie. Ce qui aura pour effet de créer une scrollbar à droite de ta sidebar. Moche, mais ça fonctionne.
      - Tu attend que je crée un « fix » pour calculer la taille en hauteur de la sidebar.

      Merci de ta suggestion

    2. Voici un petit fix pour ce genre de problème.:

      $(function() {
      var elmt = $(« #sidebar »);
      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) {
      $(« #sidebar »).css(‘overflow’ , ‘scroll’);
      $(« #sidebar »).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 {
      $(« #sidebar »).stop().animate({
      marginTop: 0
      }, »linear »);
      }
      });
      });

      1. J’ai l’impression que tout ça est destiné aux avertis comme tout WP d’ailleurs. Il ne faut oublier que tous les blogueurs ne sont pas forcément des développeurs. Moi de mon côté, je n’arrive même pas à créer ma news-letter….
        Passez tous une bonne journée, MamaFati

  2. Bonjour,
    Merci pour la fonction qui fonctionne très bien chez moi.
    Le seul petit souci, c’est quand j’arrive en bas de page :
    la sidebar pousse mon footer dans lequel j’ai placé mon formulaire de contact, etc… du coup il est impossible d’accéder à la totalité de celui-ci.
    N’y aurait-il pas une fonction supplémentaire pour que la sidebar s’arrête à la fin du contenu ?

    Merci.

    Laisser un commentaire