[Malleys]

Я пытаюсь понять
условия функции

берем высоту элемента вычитает проскороленые значение и если они меньше или равны видимой части окна то
из блока заменяем контент на ширину блока и присваивает 100 процентов

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

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

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

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

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

и как добавить плавности

transition

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