jquery - How do you know the scroll bar has reached bottom of a page

Question

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.

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.

My HTML page code is

<style>
  .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;
   }
</style>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
   $(document).ready(function(){

     $('#slidemarginleft button').click(function(){
       var $marginLefty = $(this).next();
       $marginLefty.animate({
        marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 1300 ? 655 : 1300
        });
     });
   });

 </script>

 <div id="slidemarginleft" class="slide">
   <button>slide it</button>
   <div class="inner" style="margin-left: 1300px;"><iframe width="600" scrolling="no" height="600" frameborder="0" src="http://google.com">
                                                                    </iframe></div>
 </div>

Answer 1

You would to use the scroll function in jquery to check the position if it has reached document.height or window.height values. Something along the lines of this (I haven't verified it)

$(window).scroll(function(){ 
   console.log($(window).scrollTop() == ($(document).height() - $(window).height()));
})