Nlk,
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>
body {min-height: 200vh;}
.page {height: 25vh; width: 100%; background: gray; border: 2px solid white;}
.active {background: coral;}
</style></head><body>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<script>
window.addEventListener("DOMContentLoaded", function() {
document.addEventListener("scroll", eventScroll);
var pages = document.querySelectorAll(".page");
function showPage(pageIndex) {
[].forEach.call(pages, function(el, i) {
i === pageIndex ? el.classList.add("active") : el.classList.remove("active");
});
}
function eventScroll() {
for (var i = 0; i < pages.length; i++) {
if (0 < pages[i].getBoundingClientRect().top) {
break;
}
}
showPage(i);
}
eventScroll()
});
</script></body></html>