sega1821,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<style>
main {
max-width: 480px;
margin: 0 auto;
border: 1px solid red;
position: relative;
height: 700px;
}
.progress {
position: absolute;
width: 5px;
height: 0px;
top: 0px;
left: 240px;
background-color: #ff0000;
transition: all 0.1s ease;
}
body {
height: 3000px;
margin: 0;
}
p {
height: 30em;
}
</style>
<body>
<p></p>
<main>
<div class="percentage progress" id="percentage-value"></div>
<section class="block_text_2">
</section>
</main>
<p></p>
<script>
document.addEventListener("DOMContentLoaded", function() {
const div = document.querySelector("main"),
win = document.documentElement,
percentage = document.querySelector(".percentage");
const updateScrollPercentage = function() {
let Height = win.clientHeight / 2;
let { top, height } = div.getBoundingClientRect();
let min = top - Height < 0;
let max = top + height - Height > 0;
let percent = 0;
if (min && max) percent = Math.trunc(100 * (Height - top) / (height));
if (!max) percent = 100;
percentage.style.height = percent + "%";
}
window.addEventListener('scroll', updateScrollPercentage)
})
</script>
</body>
</html>