Что нужно сделать, чтобы progress bar появился по указанному скроллу?

Question

[Alekosh Akhosh]

Доброе утро!
Понятие не имею, даже не удалось найти в интернете (либо я плохой гуглер);
Нужно чтобы, когда скролл доходит до середины страницы - появился progress bar, но имеется счетчик прогресса с анимацией.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
let options = {
        startAngle: -1.55,
        size: 150,
        value: 0.65,
        fill: {gradient: ['#00ffff', '#00ccff']}
};

$(".circle .bar").circleProgress(options).on('circle-animation-progress',
function(event, progress, stepValue){
$(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
});

$(".js .bar").circleProgress({
value: 0.50
});

Answer 1

[Алексей Дубровин]

let center = document.body.clientHeight /2 // Получаем кол-во пикселей с верха до центра экрана

let documentSize = document.body.scrollHeight // Получаем всю высоту страницы. 
let scrollTop = window.pageYOffset // На сколько мы прокрутили текущую страницу

//Событие которое реагирует на прокрутку страницы
window.addEventListener('scroll', function() {});