title: Pop-Up Sticky Footer
body: <p>I want to create a sticky footer that pop up when the user scrolling the page to the bottom, but i want the footer to stay behind the content.</p>
  
  <p>for the pop-up part i use css :</p>
  
  <pre><code>#footer {
      position: fixed;    
      height: 200px;
      width: 100%;
      bottom: 0;
      left: 0px;
      display: none;
  }
  </code></pre>
  
  <p>and jquery : </p>
  
  <pre><code>$(window).scroll(function() {
      if ($(document).height() &lt;= ($(window).height() + $(window).scrollTop())) {          
          $('#footer').show();
      }
  });
  </code></pre>
  
  <p>My problem is when the footer pop-up, the content is stay-behind the footer, i try z-index: -1 for the footer, but the content is overlaping with the footer. How can i achieve this :</p>
  
  <p>** First Step : User Scrolling Down
  ** When reach bottom, footer pop-up and the content is push-up
  ** When user scrolling up, the footer stay behind the content</p>
  
  <p><a href="https://i.stack.imgur.com/PUz8k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PUz8k.png" alt="enter image description here"></a></p>