highlight navigation dots while scrolling down on page

Question

Will try to explain this :) I have a navigation that scrolls to different anchors on the page. When the user is on one of the anchors the navigation shows an active link.

Answer 1

EDIT : Modified the code for better performance.

I made a JSFiddle that work here what I added

var parPosition = [];
        $('.par').each(function() {
            parPosition.push($(this).offset().top);
        });

        $(document).on('scroll', function() {
            var position = $(document).scrollTop(),
                index;

            for (var i=0; i<parPosition.length; i++) {
                if (position <= parPosition[i]) {
                    index = i;
                    break;
                }
            }

            $('.navigation ul li a')
               .removeClass('active')
               .eq(index)
               .addClass('active');
        });

As you can see, I added the class "par" to all paragraph. JSFiddle