title: CSS: Position sticky to bottom when enter viewport
body: <p>I am trying to add a sticky element that stays on the bottom of the page only when it enters the viewport. The idea is that the element would be placed somewhere in the middle of the page and would not be shown immediately when the user visits the page.</p>
  <p>Here's my progress so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  height: 300px;
  }
  
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    height: 30px;
    width: 100vw;
    background: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background: red;"&gt;Scroll&lt;/div&gt;
  &lt;div style="height: 300px; background: orange;"&gt;&lt;/div&gt;
  &lt;div class="sticky"&gt;Sticky Section&lt;/div&gt;
  &lt;div style="background: green;"&gt;&lt;/div&gt;
  &lt;div style="background: blue;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The problem is that my code does the opposite of what I want it to do. The element should only stick past its original location.</p>
  <p>Changing <code>bottom: 0</code> to <code>top: calc(100vh - 30px)</code> on <code>.sticky</code> seems to work fine on desktop, but I noticed it's not adequate for Safari on iOS. With this 'hacked' solution, whenever the user scrolls up, the bottom bar increases in size and forces the sticky element to jump.</p>