我有一个jQuery无限滚动分页。它在100%屏幕高度(底部)加载页面后滚动。 现在我想从100%的屏幕高度改为80%的屏幕高度。那我该怎么办?
这是我的网站:http://gaixinh.cto.vn/
<!-- start infinite scroll function -->
<script type="text/javascript">
jQuery(document).ready(function($) {
var count = 2;
var total = <?php echo $wp_query->max_num_pages; ?>;
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
if (count > total){
return false;
}else{
loadArticle(count);
}
count++;
}
});
function loadArticle(pageNumber){
$('a#inifiniteLoader').show('fast');
$.ajax({
url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
success: function(html){
$('a#inifiniteLoader').hide('1000');
$("#tiles").append(html); // This will be the div where our content will be loaded
$("a[rel='colorbox']").colorbox({
transition:'elastic',
opacity:'0.7',
maxHeight:'90%'
});
}
});
return false;
}
});
</script>
<!-- end infinite scroll pagination -->
答案 0 :(得分:2)
我认为无限滚动分页必须在文档高度的80%之后运行(不是你的平均屏幕高度)。
首先设置一个标志,以防止滚动时函数循环
var flag = false;
$(window).scroll(function(){
if(flag)
return; //return if the infinite pagination is calling
if ($(window).scrollTop() > ($(document).height() - $(window).height())*80/10){
flag = true; //set flag
infiniteLoad();
}
});
function infiniteLoad(){
//do something
flag = false; //un set flag
}