如何在浏览器调整大小时刷新导航滚动点，而无需浏览器刷新？

Question

（这是我的第一个问题，如果需要更多信息，请告诉我）

我有一个使用滚动点导航的页面，与此stack overflow answer中提供的解决方案相同。

当浏览器在example fiddle中调整大小时，活动点不再与其对应的div同步。

我的问题：有没有办法'刷新'这个位置＆amp; parPosition变量没有使用jquery刷新浏览器调整大小？下面的代码来自属于用户L105的引用小提琴。

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

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

    $(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');
        $('.navigation ul li a:eq('+index+')').addClass('active');
    });

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

（在浏览器调整大小时刷新会产生另一个问题，即在滚动时从css prop'inline-block'切换到'none'的文本会因page / scrollTop刷新而重新出现）

显然，我是初学者，我很乐意'坚持这一点'，但经过几天的努力，我决定寻求一些帮助。理想情况下，我想对现有解决方案发表评论，但我需要50多名代表。