вычислить scrolltop на бесконечности scroll

Question

У меня есть функция ajax, которая получает больше сообщений.

Но я хотел бы активировать его автоматически.

Моя HTML структура выглядит следующим образом

<div class="header"> 
    .... 
</div> 
<ul id="grid"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <!-- load more content --> 
</ul> 
<div> 
    .... 
</div> 
<div> 
    .... 
</div> 
<div> 
    .... 
</div> 
<div> 
    .... 
</div> 
<div class="footer"> 
    .... 
</div> 

Я использую этот код прямо сейчас.

var count = 2; 
    $(window).scroll(function(){ 
      if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
       loadArticle(count); 
       count++; 
      } 
    }); 

Этот код запускает функцию ajax только тогда, когда пользователь достигает нижней части страницы.

Может ли кто-нибудь сказать мне правильный способ расчета scrolltop?

Answer 1

Используйте следующий код

function bindScroll(){ 

    if ($(window).scrollTop() >= $("#grid").height() - $(window).height() - 10) { 

    // unbind scroll 
    $(window).unbind('scroll'); 

    //call ajax function 
    loadArticle(count); 

    } 
} 

function loadArticle(count){ 
    .... 
    ..Ajax Call .. 
    .... 
    //bind sroll again 
    bindScroll(); 
} 

и называем bindScroll() функции в $ (документ) .ready раздел связать событие Scroll

Answer 2

Ok Я использовал некоторые альтернативные решения.

Я надеюсь, что это будет полезно для других.

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
var count = 2; 
$.log(count); 
var total = <?php echo $wp_query->max_num_pages; ?>; 
      $(window).scroll(function(){ 
        if (element_in_scroll("#inifiniteLoader")) { 
         if (count > total){ 
          $("#inifiniteLoader").css('display','none'); 
          return false; 
         }else{ 
          $("#inifiniteLoader").css('display','block'); 
          loadArticle(count); 
         } 
         count++; 
        } 
      }); 
function loadArticle(pageNumber) { 
    $.ajax({ 
     url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php", 
     type:'POST', 
     data: "action=infinite_scroll&page_no="+ pageNumber, 
     success: function(html){ 
      $("#og-grid").append(html); // This will be the div where our content will be loaded 
     } 
    }); 
    return false; 
} 
function element_in_scroll(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 
}); 
</script> 


#inifiniteLoader { 
    margin: 20px 0; 
    display:none; 
} 

Поместите этот код, где вы хотите погрузить изображение.

<div style="text-align:center;" class="clear" id="inifiniteLoader"> 
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/loading.gif"> 
</div> 

Для загрузки изображения check here