Le concept que nous abordons aujourd'hui est fondamental dans l'expérience utilisateur web : créer une barre latérale qui « suit » l'utilisateur lors du défilement de la page. Cette fonctionnalité, souvent appelée Sticky Sidebar ou barre latérale persistante, permet de maintenir un contenu important (navigation, publicité, appel à l'action) visible.
Il existe plusieurs approches pour y parvenir. Nous allons couvrir les deux principales – CSS pur et JavaScript (jQuery) – avec une technique CSS avancée en prime.
VOIR LA DÉMO | TÉLÉCHARGER LES FICHIERS
1. L'Approche Statique : CSS position: fixed
La méthode la plus simple et la plus performante consiste à utiliser la propriété CSS position: fixed.
L'idée est de positionner la barre latérale par rapport à la fenêtre du navigateur. Pour que la barre latérale se place correctement, nous définissons d'abord un positionnement relatif sur le conteneur parent (#page-wrap).
Code CSS
#page-wrap {
width: 600px; /* Largeur de la zone de contenu */
margin: 15px auto;
position: relative; /* Base pour le positionnement des enfants */
}
#sidebar {
width: 190px;
position: fixed; /* Fixe la barre latérale par rapport à la fenêtre */
/* Positionnement exact, en dehors de la zone principale */
margin-left: 410px; /* Décale la barre latérale vers la droite */
top: 15px; /* Optionnel : Ajoute un petit décalage par rapport au haut */
}Avec cette technique, la barre latérale reste solidement en place lorsque l'utilisateur fait défiler la page. C'est l'option la plus légère et la plus rapide.
2. L'Approche Dynamique : JavaScript (jQuery)
L'utilisation de JavaScript permet un contrôle plus fin et un effet de défilement plus progressif. Nous mesurons la position de défilement de la fenêtre et la comparons à la position initiale de la barre latérale.
Logique JavaScript
Si la position de défilement dépasse la position initiale de la barre, nous ajustons dynamiquement sa marge supérieure pour la maintenir dans la zone visible. L'utilisation de .animate() ajoute un effet de transition animé fluide.
$(function() {
var $sidebar = $("#sidebar"),
$window = $(window),
// Position initiale (hauteur) de la barre latérale
offset = $sidebar.offset(),
// Marge de sécurité
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
// L'utilisateur a dépassé la position de départ : on la "colle"
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
// L'utilisateur est revenu au-dessus : on réinitialise la position
$sidebar.stop().animate({
marginTop: 0
});
}
});
});L'avantage principal de cette approche est l'effet visuel animé qu'elle produit.
3. Technique Bonus : L'Effet de « Révélation » CSS
Pour un effet plus sophistiqué, on peut utiliser une astuce de positionnement avec une marge supérieure négative pour cacher la barre latérale sous une zone d'en-tête (#title-area) qui a un fond opaque.
En ajoutant une image transparente en fondu au-dessus de la barre latérale, celle-ci semble se « révéler » progressivement lorsqu'elle glisse vers le bas.
Code CSS pour la Révélation
/* La marge supérieure négative positionne la barre sous la zone de titre */
#sidebar {
width: 190px;
position: fixed;
/* Déplace vers le haut et vers la droite */
margin: -135px 0 0 410px;
}
/* Zone de titre conservée en haut grâce au z-index élevé */
#title-area {
background: white; /* Doit être opaque pour cacher la barre */
position: relative;
z-index: 3000; /* Assure qu'elle est au-dessus */
}
/* Image en fondu blanc placée sur la barre pour l'effet de révélation */
#reveal {
position: absolute;
right: 0;
bottom: -20px;
}Considérations Importantes
Accessibilité et Responsivité
L'utilisation de positionnement fixe (position: fixed) pour du contenu est délicate. Il est crucial de s'assurer que le contenu à positionnement fixe ne dépasse jamais la hauteur de la fenêtre visible, surtout sur de petits moniteurs ou appareils mobiles. Si sa hauteur dépasse la zone visible, le bas du contenu sera inaccessible car le débordement d'un élément fixe ne déclenche pas de barre de défilement.
Compatibilité Navigateur (Legacy)
Historiquement, le position: fixed posait problème, notamment avec Internet Explorer 6 et 7. Aujourd'hui, cette technique est largement supportée, rendant les solutions de contournement (comme l'utilisation de commentaires conditionnels) obsolètes pour la plupart des projets modernes.
