80%屏幕高度后jQuery无限滚动分页功能?

时间:2014-08-14 02:13:22

标签: jquery scroll pagination infinite

我有一个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 -->

1 个答案:

答案 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
}