[voraa]

почему когда я переменные выношу за функцию они не работаю, они же глобальными должны быть

Вынести можно только так

<script>
let percentage = document.querySelector(".percentage");
let percentageVal = document.querySelector("#percentage-value");
let fact = document.querySelector(".fact");

let updateScrollPercentage = function() {
    let heightOfWindow = window.innerHeight;
    let contentScrolled = window.pageYOffset;
    let bodyHeight = document.body.offsetHeight;
     
    if(bodyHeight - contentScrolled <= heightOfWindow) {
        percentageVal.textContent = percentage.style.height = "100%"
    }
    else {
        let total = bodyHeight - heightOfWindow;
        let got = contentScrolled;
        let percent = parseInt((got/total) * 100);
        percentageVal.textContent = percentage.style.height = percent + "%";
            if (percent>=20 && percent<=30){
                fact.style.display = "block";
            }
            else{
                fact.style.display = "none";
            }
    }
}
window.addEventListener('scroll', updateScrollPercentage)
</script>