jquery - ページを下にスクロールしているときにナビゲーション ドットを強調表示する

Question

これを説明しようとします:)ページ上のさまざまなアンカーにスクロールするナビゲーションがあります。ユーザーがアンカーの 1 つにいる場合、ナビゲーションにはアクティブなリンクが表示されます。

ユーザーがページの一番上にいて、ページの一番下に移動するリンクをクリックすると、その間のすべてのリンクが強調表示されます。スクロールして通り過ぎます。信号機みたい。

私は今のところこのJqueryを持っていますが、クリックされたリンクでクラスを追加/削除するだけです。どのように進めるべきかについてのアイデアはありますか？

$(document).ready(function($){
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

        $('.navigation ul li a').click(function () {
        $('.navigation ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});

JSfiddleも作成しました