title: Sticky footer behind main content, visible on scroll
body: <p>I would like to re-create this revealing sticky-footer effect found at <a href="http://www.akc.org/dog-breeds/" rel="noreferrer">http://www.akc.org/dog-breeds/</a></p>
  
  <p><img src="https://i.imgur.com/r6MOgLR.gif" alt="help"></p>
  
  <ol>
  <li>I know the footer has to be fixed.</li>
  <li>I know the content needs to have a higher <code>z-index</code></li>
  <li>I'm guessing (sort of) that the body needs to have a <code>margin-bottom</code> which is equal to the height of the footer???</li>
  </ol>
  
  <p>Please would someone help me out.</p>
  
  <p>I'm using Twitter Bootstrap 4. The general markup looks like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container"&gt; &lt;!-- This part should scroll up to reveal the footer below --&gt;
          &lt;!-- Content goes in here --&gt;
      &lt;/div&gt;
      &lt;footer class="footer"&gt; &lt;!-- This should be hidden initially --&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;!-- Footer stuff goes in here --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>