Сергей Ракипов,
ок

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

<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>

анимировать opacity меняя класс элемента вместо style.display

а почему так?

и у меня есть ощущение что это коряво когда в одной функции написано
if else с разными так сказать действиями одно отвечает за процент а втрое за ввод.
и как добавить плавности

это понятно, но я имел виду может какой способ есть в js

А зачем вам отдельно обрабатывать такой случай?

Для того, чтобы вычислить процент прокрутки у элемента, вам следует текущее значение прокрутки разделить на максимально возможное.

const progress = document.querySelector("progress");

function scrollHandler() {
	const p = document.body.scrollTop / (document.body.scrollHeight - document.body.clientHeight);
	progress.value = p;
}
addEventListener("load", scrollHandler);
document.body.addEventListener("scroll", scrollHandler);

Чтобы прокрутка у элемента заработала, вам следует указать размеры элемента (иначе прокрутка у элемента не будет, а только у корневого элемента)

html, body {
	height: 100%;
	overflow: auto;
	margin: 0;
}

Зачем менять класс, разве сразу непрозрачность анимировать нельзя?

transition

Исправленный пример — https://codepen.io/Malleys/pen/RwWowmd?editors=1000

Я понимаю что можно, просто я только учусь и хочу узнать есть ли возможность анимировать другими способами.

А как прочитать эту запись

let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

pageYOffset я понимаю что на сколько окно браузера было проскорелно
scrollTop на сколько элемент было проскролено.

но вот языком нормальным не могу сказать что значит эта запись

function sticky(){

let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

if(scrollTop >= 0 & scrollTop <= 220){
	imgArticle.style.position = "absolute";
	imgArticle.style.top = "220";
}
else if(scrollTop >= 220 & scrollTop <= 500){
	imgArticle.style.position = "fixed";
	imgArticle.style.top = "0";
}
else{
	imgArticle.style.position = "absolute";
	imgArticle.style.top = "280" + "px";
}
}

window.addEventListener("scroll", sticky);

Почему если я выношу эту переменную за функцию

let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

то функция не работает

потому что переменная содержит значение, на момент её создания или внесения изменений.
изменений не вносилось, значит будет значение на момент создания.