title: How do you know the scroll bar has reached bottom of a page
body: <p>I have a HTML page, when the scroll bar reaches bottom of the page I need to slide in a div from bottom-right containing an iframe. </p>
  
  <p>Using JQuery I have implemented the sliding effect for the div containing the iframe. At present the sliding is done by clicking a button(on button click event). How could I change this, so that when the scroll bar reaches bottom the div containing the iframe automatically slides in.</p>
  
  <p>My HTML page code is</p>
  
  <pre><code>&lt;style&gt;
    .slide {
        background-color: #FFFFCC;
        border: 1px solid #999999;
        height: 900px;
        margin: 1em 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }
    .slide .inner {
        background: #44CC55;
        bottom: 0;
        /*height: 650px;*/
        height: auto;
        left: 0;
        padding: 6px;
        position: absolute;
        width: 650px;
        border: 1px solid red;
     }
  &lt;/style&gt;
  
  &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
     $(document).ready(function(){
  
       $('#slidemarginleft button').click(function(){
         var $marginLefty = $(this).next();
         $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 1300 ? 655 : 1300
          });
       });
     });
  
   &lt;/script&gt;
  
   &lt;div id="slidemarginleft" class="slide"&gt;
     &lt;button&gt;slide it&lt;/button&gt;
     &lt;div class="inner" style="margin-left: 1300px;"&gt;&lt;iframe width="600" scrolling="no" height="600" frameborder="0" src="http://google.com"&gt;
                                                                      &lt;/iframe&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>