Как вы знаете, что полоса прокрутки достигла нижней части страницы

У меня есть HTML-страница, когда полоса прокрутки достигает нижней части страницы, мне нужно сдвинуть в div с нижнего правого, содержащего iframe.

Используя JQuery, я применил эффект скольжения для div, содержащего iframe. В настоящее время сдвиг выполняется нажатием кнопки (при событии нажатия кнопки). Как я могу изменить это, так что, когда полоса прокрутки достигает дна, div, содержащий iframe, автоматически переместится.

Код моей HTML-страницы

<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="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css'; return false;" 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>

Ответ 1

Вы должны использовать функцию прокрутки в jquery для проверки позиции, если она достигла значений document.height или window.height. Что-то вроде этого (я еще не проверял)

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

Ответ 2

if (document.documentElement.clientHeight + 
    $(document).scrollTop() >= document.body.offsetHeight )
{ 
    // Display alert or whatever you want to do when you're 
    //   at the bottom of the page. 
    alert("You're at the bottom of the page.");
}

Ответ 3

if($(window).scrollTop() + screen.height > $('body').height())
{
 //do whatever
}