Bonjour à tous.
J'ai une page HTML avec la structure suivante:
Ce que j'aimerais faire c'est que le <button> se comporte de la façon suivante lors du défilement de la page à l'écran :
- tant que la <section> #maj n'est pas affichée à l'écran, le <button> n'est pas visible
- quand le <header> de cette <section> est affiché à l'écran, le <button> est affiché dans la marge de cette section.
- quand le <header> de cette section n'est plus visible, le <button> est visible en haut de l'écran.
Je crois comprendre que le positionnement du <button> doit être 'sticky" mais je n'arrive pas à obtenir le résultat recherché.
Pour le moment j'ai mis le <button> en position fixed, ce qui ne correspond pas à mon premier critère: le <button> est visible même quand la<section> ne l'est pas.
Merci pour votre aide.
-
Modifié par PapyJP (13 Feb 2026 - 15:24)
J'ai une page HTML avec la structure suivante:
<body>
<header>...</header>
<main>
..............................
..............................
<nav>
..............................
..............................
</nav>
<section id="maj">
<header>
<h2>....</h2>
<button>...</button>
</header>
<main>.................</main>
</section>
</main>
</body>
Ce que j'aimerais faire c'est que le <button> se comporte de la façon suivante lors du défilement de la page à l'écran :
- tant que la <section> #maj n'est pas affichée à l'écran, le <button> n'est pas visible
- quand le <header> de cette <section> est affiché à l'écran, le <button> est affiché dans la marge de cette section.
- quand le <header> de cette section n'est plus visible, le <button> est visible en haut de l'écran.
Je crois comprendre que le positionnement du <button> doit être 'sticky" mais je n'arrive pas à obtenir le résultat recherché.
Pour le moment j'ai mis le <button> en position fixed, ce qui ne correspond pas à mon premier critère: le <button> est visible même quand la<section> ne l'est pas.
Merci pour votre aide.
-
Modifié par PapyJP (13 Feb 2026 - 15:24)