# Les Sticky Effects d’Elementor : figer une bannière sans script personnalisé > Fixer une bannière d'information au défilement ne demande ni JavaScript maison ni extension supplémentaire, à condition de connaître le bon réglage. - Auteur : Clément Hadrot - Publié le : 2025-11-10 - Mis à jour le : 2025-11-10 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/sticky-effects-elementor-banniere-sans-script/ ## L’essentiel - Le réglage Sticky se trouve dans l'onglet Avancé, section Motion Effects - Le décalage doit tenir compte d'une éventuelle barre déjà fixe - Un test sur mobile évite les chevauchements imprévus Faut-il vraiment écrire une ligne de JavaScript pour qu'un bandeau reste visible pendant que le visiteur fait défiler la page ? La réponse est non depuis longtemps dans Elementor Pro, mais le réglage responsable de ce comportement reste mal connu, souvent confondu avec les effets de parallaxe présents dans le même onglet. La fonctionnalité s'appelle Sticky, rangée dans l'onglet Avancé de chaque élément, sous la section Motion Effects. Elle permet de figer une Section, un Container ou un widget à une position donnée de l'écran pendant que le reste du contenu continue de défiler, sans aucun script à ajouter. ## Étape 1 : identifier l'élément à figer Le réglage Sticky s'applique à l'élément sélectionné dans le panneau de gauche, généralement un Container englobant l'ensemble de la bannière plutôt qu'un widget isolé, pour éviter qu'un seul texte ne reste figé alors que son arrière-plan continue de défiler autour de lui. Sélectionner le Container parent de la bannière avant de poursuivre. Ouvrir ensuite l'onglet **Avancé** de ce Container, puis dérouler la section **Motion Effects**, où figure le contrôle **Sticky**, généralement réglé sur *None* par défaut. ## Étape 2 : choisir la position de fixation Le contrôle Sticky propose deux positions : *Top*, pour figer l'élément en haut de la fenêtre visible, l'usage le plus courant pour une bannière d'information ou un menu secondaire, et *Bottom*, pour un élément fixé en bas de l'écran, plus adapté à un bouton d'appel à l'action permanent. - `Top` : convient à une bannière d'annonce, un fil d'Ariane ou un menu de navigation secondaire. - `Bottom` : convient à un bouton de contact ou un bandeau de conversion permanent. ## Étape 3 : régler le décalage pour éviter les chevauchements Le contrôle **Offset**, exprimé en pixels, détermine la distance entre l'élément fixé et le bord de l'écran une fois qu'il devient sticky. Ce réglage devient indispensable dès qu'une autre barre, comme un menu principal déjà fixe, occupe le haut de l'écran : sans décalage correct, la bannière viendra se superposer au menu existant plutôt que de se positionner juste en dessous. > L'essentiel à retenir : Le réglage Sticky se trouve dans l'onglet Avancé, section Motion Effects ; Le décalage doit tenir compte d'une éventuelle barre déjà fixe ; Un test sur mobile évite les chevauchements imprévus La valeur à renseigner correspond généralement à la hauteur du menu déjà fixe, mesurable directement dans l'inspecteur du navigateur en survolant l'élément concerné. ## Étape 4 : limiter l'effet aux appareils concernés Le contrôle **Sticky On** permet de restreindre l'effet à certains types d'appareils : ordinateur, tablette, mobile, ou une combinaison des trois. Sur mobile, un élément fixé en haut de l'écran réduit d'autant l'espace vertical disponible, déjà limité sur un petit écran ; désactiver l'effet sur mobile constitue souvent le choix le plus raisonnable pour une simple bannière d'information secondaire. ### Étape 5 : vérifier le comportement en superposition Le contrôle **Effects Z-Index**, disponible dans la même section, gère l'ordre d'empilement de l'élément fixé par rapport au reste du contenu de la page. Un oubli fréquent consiste à laisser ce réglage à sa valeur par défaut alors que la bannière fixée finit partiellement masquée par un autre élément également positionné en superposition, comme une popup ou un bouton flottant. > Un élément sticky mal testé sur mobile finit presque toujours par masquer un bouton important : le test sur petit écran n'est jamais optionnel. ## Étape 6 : tester le comportement au défilement réel La prévisualisation dans l'éditeur Elementor ne restitue pas toujours fidèlement le comportement sticky, en particulier sur les gabarits générés par le Theme Builder. Un test en aperçu frontend, avec un véritable défilement de la souris ou du doigt, reste la seule vérification fiable avant publication. ## En résumé Le réglage Sticky d'Elementor Pro couvre la plupart des besoins de bannière ou de menu fixé au défilement sans écrire une seule ligne de JavaScript personnalisé. La vigilance se porte surtout sur le décalage face à d'autres éléments déjà fixes et sur le comportement spécifique aux petits écrans, deux points que la prévisualisation de l'éditeur ne montre pas toujours correctement.