在用户滚动

Question

首先，我使用一个库来设置从#one到#two的动画，使用以下代码：

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

我的HTML是：

<div id="indicators">

    <a href="#one" class="btn page-scroll" style="border-radius: 50%;"><i class="fa fa-circle" aria-hidden="true"></i>
</a>
    <a href="#two" class="btn page-scroll"><i class="fa fa-circle" aria-hidden="true"></i>
</a>
    <a href="#three" class="btn page-scroll"><i class="fa fa-circle" aria-hidden="true"></i>
</a>
    </div>

所以现在当我点击一些指示器（圆圈图标）时，我发送动画到div，但我现在要做的是当用户专注于某些div时向下滚动以向他们显示带动画的新#id ...

等。用户专注于#two，当向下滚动一点时，向他们展示#three with animation ...

$(document).ready(function(){
    $(body).scroll(function(){

//if user is on #one on scroll go to the #two with animation
    });
});