title: How to hover a Fixed element until it reaches some point
body: <p>I've got a div which I need to be fixed to the bottom of the screen, until it reaches some point after scrolling and stop there and stay. If a user start scrolling back up - make it fixed again after passing that same point.</p>
  
  <p>Any ideas on how this can be accomplished?</p>
  
  <p>EDIT: (here's my current code which doesn't work)</p>
  
  <p><code></p>
  
  <pre><code>$(window).scroll(function () {
      if ($(this).scrollTop() &lt; $(document).height() - 81) {
          $('#bottom_pic').css('bottom', "0px");
      }
      else {
          $('#bottom_pic').css('bottom', "81px");
      }
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#bottom_pic 
  {
      position: fixed;
      bottom: 0px;
  }
  </code></pre>
  
  <p></code></p>
  
  <p>Thanks!</p>