Sticky et défilement vertical

Bonjour,

Cette discussion fait suite à ce sujet.

Je reprends la dernière question mieux placée dans ce forum.

J'ai un peu modifié le codepen de Niuxe afin d'illustrer un petit problème que je rencontre avec sticky.

Le bloc de contenu (section) fait 400 vh de haut.

La hauteur du bloc sticky est définie par le contenu, en l'occurrence principalement la hauteur de h2, soit 100vh, il est plus haut que la fenêtre, on ne voit pas le bas.

La hauteur de aside n'est pas précisée, je suppose que c'est celle du bloc de contenu (section).

Quand je scrolle vers le bas, le bloc sticky prend sa position fixe, normal.
Mais pour voir le bas je suis obligé d'aller jusqu'à la fin du bloc de contenu.

N'y a-t-il pas moyen que le bloc sticky se libère dès que la molette atteint la fin de ce bloc ?

J'espère être clair.
Modifié par boteha_2 (15 Jan 2026 - 22:47)

Non ce n'est pas très clair

Mais en gros, un bloc sticky se colle en haut de l'écran lorsque sa propriété top est renseignée et différente de auto.
Un bloc sticky se colle en bas lorsque sa propriété bottom est renseignée et différente de auto.

Cette règle simple permet en général de comprendre ce qui se passe. Plus d'information si nécessaire ici : position

a écrit :
La hauteur du bloc sticky est définie par le contenu, en l'occurrence principalement la hauteur de h2, soit 100vh, il est plus haut que la fenêtre, on ne voit pas le bas.

Hein ? Depuis quand <h2>, qui est une balise de titre, est-elle utilisée pour dimensionner un bloc ?
De plus, sur ton code pen, tu sembles fâché avec les } fermantes. Heureusement que les navigateurs font le travail.
On ne sait pas exactement ce que tu veux. En tout cas, .bloc doit avoir une hauteur maxi, par exemple max-height:600px;
"main" ne devrait pas englober toute la page. Cette balise est normalement dédiée à du contenu principal, comme celui de ton "contenu". "aside" devrait être dédié justement à ce qui est de côté, comme des liens ou des informations secondaires. Là, tu englobes toute ta page dans "main", que tu utilises comme un container principal, ce qui dérange un peu le fonctionnement du reste.
Je n'ai pas le temps de te refaire un code, mais j'ai un site avec exactement la même configuration. Une balise "main" pour le contenu principal et un "aside" pour des liens. Le "aside" est en sticky, avec une hauteur max définie et les deux blocs glissent indépendamment l'un de l'autre. C'est un grand classique sur les médias de contenu.

Bonjour,

Bongota a écrit :
Hein ? Depuis quand <h2>, qui est une balise de titre, est-elle utilisée pour dimensionner un bloc ?
De plus, sur ton code pen, tu sembles fâché avec les } fermantes. Heureusement que les navigateurs font le travail.

C'est vite fait, juste pour poser le problème.

Bongota a écrit :
J'ai un site avec exactement la même configuration. Une balise "main" pour le contenu principal et un "aside" pour des liens. Le "aside" est en sticky, avec une hauteur max définie et les deux blocs glissent indépendamment l'un de l'autre.

Peux-tu donner l'URL de ce site ?

Voici une petite partie du code du site. Si tu l'adoptes à ton projet, tu vas devoir revoir ton code. Celui-ci est bien plus simple.

<aside>
   <h2>Bibliographie</h2>
<p>blblblblblblblblbl</p>
.............
.............
</aside>
<main>
<a class="button-top" href="#" role="button" title="Retour haut de page">&#8593;</a>
..................
.................
</main>

Tout le html de ce bloc, jusqu'avant le <footer>
La partie du css pour le sticky, le reste, c'est à toi de voir (Grid, dimensions, couleurs)

aside {
  overflow:scroll;
  max-height:600px;
  position:sticky;
  scrollbar-width: thin;
  top:0;}
main {
  position:relative;
......
......}

Bonjour Bongota,

Merci pour le suivi et le lien vers ton site.

Le sujet du site est intéressant.

Mais ton bloc en position sticky rencontre le problème dont je parle.

Diminue la hauteur de la fenêtre de façon à ce que le bloc sticky soit plus haut que la fenêtre.

Puis, partant du haut de page, tu scrolles vers le bas.

La partie sous la ligne de flottaison du bloc sticky ne va apparaître que lorsque tu es arrivé en bas du bloc principal.

Autrement dit, le sticky descend, puis il s'arrête, puis il redescend quand tu atteins le bas de main.

J'aimerais une solution pour qu'il descende sans s'arrêter.

Est-ce plus clair ?

Non, c'est plus complexe...
Le but de cett configuration chez moi, c'est :
- Pouvoir faire défiler cet aside de façon à avoir sous la main tous ses liens, sans que le main bouge. Et ceci, quel que soit l'endroit où je me trouve en lisant le main.
Bien sûr, il arrive un moment où les deux bougent en même temps, mais c'est prévu. La page s'agrandissant tous les mois, on ne peut pas avoir tout sous les yeux. Mais ça fonctionne parfaitement.
Pourquoi et comment tu veux diminuer la hauteur de la fenêtre ? Je viens de tester le site sur un écran 24 p, écran plus haut que le mien, tout fonctionne bien. Je travaille avec une molette, mais avec les flèches haut/bas, ça fonctionne aussi.

Bongota a écrit :
Pourquoi et comment tu veux diminuer la hauteur de la fenêtre ?

Le cas qui m'intéresse est celui où le bloc sticky est plus haut que la fenêtre.

Pour ton site il faut diminuer la hauteur de la fenêtre pour créer ce cas.

Alors mon problème apparaît.