Question

我有一些代码可以让我检查我在网站上的位置，然后允许我做一些事情......例如在页面上显示更多博客。

<section class="bg-grey" id="category">
    <div class="container">
        <div class="row">
            <div class="main col-md-12" id="category">
                <div id="posts"></div>
                <p id="loading" class="text-center">
                    <img src="/images/bx_loader.gif" alt="Loading…" />
                </p>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</section>

这里的jquery代码：

var start_index = 0;
var products_to_show = 6;

var win = $(window);
win.scroll(function() {

    if ($(document).height() - win.height() == win.scrollTop()) {

        $('#loading').show();

        if(start_index < max_items){

            var datax = {
                'start_index' : start_index
            };

            $.ajax({
                url: '/ajax-includes/get-post.php',
                data:datax,
                type: 'POST',
                success: function(html) {
                    $(html).hide().fadeIn(1000).appendTo('#posts');
                    $('#loading').hide();
                }
            });
            start_index = start_index + products_to_show;
        }else{
            $('#loading').hide();
        }
    }
});

这是getpost.php的代码

<div class="item col-sm-4 col-lg-4 col-md-4 col-xs-6 scroll">
    <div class="product">
        load blogstuff here
    </div>
</div>

当我滚动到底部时，代码触发正常，但只在桌面（更大的屏幕），在手机上我需要在此触发前滚动到底部，有没有办法在特定的div上进行此触发？因此，当div可见时，做同样的事情，或者如果有人有更好的方法做到这一点。

Answer 1

如果您知道div的位置，那么您可以这样做：

$(window).scroll(function(){
   var fromTop = $(window).scrollTop();
   var divTop = $('#id of your div').offset().top;
   var divHeight = $('#id of your div').height();
   var winHeight = $(window).height();
   if (fromTop <= divTop && (divTop + divHeight  - winHeight) <= 0) {
      // your div is visible
      // here goes your code
   }
});

如何在特定元素或div上触发滚动？

1 个答案: