js+jq

by qwerew0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div class="box"></div>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>
<section>
	<h2>section1</h2>
</section>

CSS

section {
	display: flex;
	align-items: center;
	text-align: center;
	height:100vh;
}
.box {
	position: fixed;
}

JavaScript

const sections = $("section");
const h2 = $("h2");
let scrollTop;
h2.each(function (idx, obj) {
	$(obj).html("section" + (idx + 1));
});

$(window).scroll(function () {
	let sct = $(window).scrollTop();
	$(".box").html("<p>" + sct);
});