voraa,
 я прочитал и поискал информацию прежде чем обратится сюда, для меня форум это последнее место, так устроено что есть люди который самоутверждаются за счет новичков и начинаю вести себя мерзко и надменно, по этому я пишу только уже когда потрачена много времени на самостоятельный поиск. 
let updateScrollPercentage = function() { 
    let heightOfWindow = window.innerHeight;
    let contentScrolled = window.pageYOffset;
    let bodyHeight = document.body.offsetHeight;
    let percentage = document.querySelector(".percentage");
    let percentageVal = document.querySelector("#percentage-value");
	
    if(bodyHeight - contentScrolled <= heightOfWindow) {
        percentageVal.textContent = percentage.style.width = "100%"
    }
    else {
        let total = bodyHeight - heightOfWindow;
        let got = contentScrolled;
        let percent = parseInt((got/total) * 100);
        percentageVal.textContent = percentage.style.width = percent + "%"
    }
}
window.addEventListener('scroll', updateScrollPercentage)
Я пытаюсь понять 
условия функции 
берем высоту элемента вычитает проскороленые значение и если они меньше или равны видимой части окна то 
из блока заменяем контент на ширину блока и присваивает 100 процентов, что это такое? 
в другом случае 
получаем переменную где высота элемента с вычетом видимой части окна
еще переменная которая показывает на сколько проскролено 
еще переменная где я перевожу в цифры, первую перменую деленаую на вторую и умноженую на 100
и дальше строка тоже ставит меня в тупик.