Effet sticky Wix Studio : garder un élément visible au défilement 📌

L'effet sticky (« collant ») permet à un élément de rester visible pendant que le visiteur fait défiler la page, puis de repartir avec le reste du contenu. C'est le principe d'un menu qui suit la lecture ou d'un visuel qui reste à côté d'un long texte.

En bref : sélectionnez l'élément, ouvrez l'Inspecteur, puis dans la partie Position choisissez le type sticky. Indiquez s'il colle en haut, en bas ou les deux, et ajoutez un décalage si besoin. L'élément ne reste collé que dans les limites de son conteneur parent : si ce parent est trop court, l'effet ne se voit pas.

À quoi sert l'effet sticky sur Wix Studio ?

• Garder un header ou un bouton de contact visible en permanence.

• Laisser une image ou un titre en place pendant qu'une colonne de texte défile à côté.

• Construire des effets plus avancés, comme le scroll horizontal ou un parallax à plusieurs calques.

Comment créer un effet sticky sur Wix Studio

1. Sélectionnez l'élément ou la section à rendre sticky.

2. Ouvrez l'Inspecteur avec l'icône en haut à droite de l'éditeur.

3. Descendez jusqu'à la partie Position et changez le type de position pour l'option sticky.

4. Choisissez où l'élément colle : en haut, en bas, ou en haut et en bas.

5. Saisissez un décalage (offset) si vous voulez garder un espace, par exemple sous un header fixe.

6. Testez en aperçu, sur ordinateur puis sur mobile.

Wix propose aussi une option pour garder l'élément au premier plan. Wix recommande de l'activer : l'élément passe visuellement devant le reste tout en gardant sa place logique dans le code de la page, ce qui est préférable pour l'accessibilité et le SEO.

Sticky, épinglé ou animation : lequel choisir ?

Bon à savoir : un élément épinglé ne peut pas recevoir d'animation au défilement, alors qu'un élément sticky peut se combiner avec d'autres effets. Autre limite : une seule section peut être épinglée par page. Pour l'en-tête, Wix propose en plus des effets dédiés au défilement.

Pourquoi mon effet sticky ne fonctionne pas ?

Dans la grande majorité des cas, c'est une question de place. Un élément sticky reste collé tant que son conteneur parent défile. Si le conteneur fait la même hauteur que l'élément, il n'a aucune marge pour « coller ». Agrandissez la section ou le conteneur parent, ou placez l'élément dans une grille plus haute.

• Vérifiez que l'élément est bien dans le bon parent (panneau des calques).

• Vérifiez le décalage : une valeur trop grande peut cacher l'effet.

• Contrôlez chaque point de rupture : sur mobile, les colonnes s'empilent et l'effet perd souvent son intérêt.

Mon avis de webdesigner sur l'effet sticky

C'est l'un des effets les plus utiles de Wix Studio, parce qu'il améliore la lecture au lieu de la décorer. Un header sticky discret ou une image qui accompagne un texte long rendent une page plus agréable. Côté performance, l'effet est léger : il ne charge rien de plus.

Évitez seulement d'empiler plusieurs éléments collés en même temps sur mobile : sur un petit écran, ils mangent vite la moitié de la place disponible.

Questions fréquentes sur l'effet sticky Wix Studio

Peut-on rendre une section entière sticky ?

Oui. Le réglage de position sticky s'applique aux éléments comme aux sections, depuis la même partie de l'Inspecteur.

L'effet sticky ralentit-il le site ?

Non, pas de façon notable. Contrairement aux effets de fond ou aux vidéos, il ne charge aucun média supplémentaire.

Quelle différence avec le docking ?

Le docking définit où un élément s'accroche dans son conteneur (en haut, à droite, au centre). Le sticky décide de ce qu'il fait pendant le défilement.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : créer des éléments et sections sticky, Wix : épingler des éléments et sections.