title: Back-to-top button and footer (positioning)
body: <p>I just included a "back-to-top"-button to my website.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="scroll-top scroll-is-not-visible"&gt;
    &lt;a href="#0"&gt;&lt;i class="fa fa-angle-up" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;footer class="site-footer"&gt;
   ...
  &lt;/footer&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.scroll-top{
    position: fixed;
    right: 50px;
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .scroll-is-not-visible{
    visibility: hidden
  }
  .scroll-is-visible{
    visibility: visible
    opacity: 1
  }
  .scroll-fade-out{
    opacity: .5
  }
  </code></pre>
  
  <p>The different classes are added or removed by jQuery. Everything works well, but if I scroll down completely, the button (logically) <strong>overlaps</strong> the footer and hides the text behind it.</p>
  
  <p>My question is, how I can edit my code to display the button at the defined position as long as the footer is not in the viewport and as soon as the footer enters the viewport the button should stay 50px above the footer-container. So if the footer is in the viewport, the button should scroll with the content.</p>
  
  <p>I don't know if this is understandable, so please comment if you do not get what I mean.</p>
  
  <p>Thanks in advance!</p>