修复页面滚动百分比返回无穷大的问题？

Question

我正在尝试创建标题动画，该动画取决于页面滚动量而触发。我正在使用以下代码来计算页面下的百分比，然后为相应的标题设置动画：'''

var perctScrolled = 0;

//--------Scroll Percentage calc------

function amountscrolled(){

    var winheight = $(window).height(); //scrollable area of document

    var docheight = $(document).height(); //height of entire webpage

    var scrollTop = $(window).scrollTop();

    var trackLength = docheight - winheight; //total available scroll length

    perctScrolled = Math.floor(scrollTop/trackLength * 100); //amount scrolled

    console.log(perctScrolled + '% scrolled');

}

//-----title animation----

$(window).scroll(function() {

    amountscrolled();

    var scrollPosition= [125,225,250,350,450]; //percentage of the height where i want titles to display

    for(var i=0; i < scrollPosition.length;){

        var currentTitle = "#title:nth-child("+i+")";

        if (perctScrolled == scrollPosition[i]) {  

            $(currentTitle).css('left', 0);

            i++;

        }else{i++;}

    }

});

'''加载网站时，它将在控制台中返回“无限滚动％”，而不是当前滚动百分比。谁能解释为什么这不起作用/无法修复我的代码？谢谢

编辑：在页面的第一次加载，“无限％滚动”显示在控制台中。然后无法重新加载页面。可能与我的循环有关吗？