CSS : Positionner l'autocollant en bas de la fenêtre d'affichage

Question

J'essaie d'ajouter un élément collant qui ne reste en bas de la page que lorsqu'il entre dans la fenêtre d'affichage. L'idée est que l'élément soit placé quelque part au milieu de la page et ne s'affiche pas immédiatement lorsque l'utilisateur visite la page.

Voici mes progrès jusqu'à présent :

div {
height: 300px;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  width: 100vw;
  background: yellow;
}

<div style="background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
<div class="sticky">Sticky Section</div>
<div style="background: green;"></div>
<div style="background: blue;"></div>

Le problème est que mon code fait le contraire de ce que je veux qu'il fasse. L'élément ne doit dépasser que son emplacement d'origine.

Changer bottom: 0 a top: calc(100vh - 30px) en .sticky semble bien fonctionner sur le bureau, mais j'ai remarqué qu'il n'est pas adéquat pour Safari sur iOS. Avec cette solution "piratée", lorsque l'utilisateur fait défiler la page vers le haut, la barre inférieure augmente de taille et oblige l'élément collant à sauter.

Answer 1

La position collante peut parfois être un peu déroutante et frustrante.

La clé pour résoudre ce problème est de garder à l'esprit qu'un élément collant apparaîtra en haut de son élément parent. Ainsi, en divisant ou en encapsulant le contenu de la page en deux sections, nous pouvons obtenir le résultat souhaité.

La première section contient du contenu et aucun élément collant,

La deuxième section contient le contenu et l'élément collant souhaité qui apparaîtra en haut de cet élément

Nous pouvons décider de l'endroit de la page où l'élément adhésif apparaît en premier lieu en créant la séparation entre les deux sections ou, plus précisément, en commençant la deuxième section.

Voici un exemple de code où l'élément collant apparaît au milieu de la page.

//

.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  width: 100vw;
  background: yellow;
}

<!-- Content you want before the sticky element -->
<div>
  <div style="height: 300px; background: red;">Scroll</div>
  <div style="height: 300px; background: orange;"></div>
</div>

<!-- Content you want after the sticky element -->
<div>
  <!-- The sticky element will appear as if its been placed here -->
  <div class="sticky">Sticky Section</div>
  <div style="height: 300px; background: green;"></div>
  <div style="height: 300px; background: blue;"></div>
</div>