KowkogaB,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
height: 500px;
}
#steps {
position: relative;
min-height: 800px;
}
.steps__circle {
position: absolute;
background: #ff0000;
height: 30px;
width: 30px;
border-radius: 50%;
border: 5px solid transparent;
background-clip: padding-box;
box-shadow: 0px 0px 0px 2px #ff0000;
transition: .3s ease-in-out;
}
.steps__circle--1 {
left: 50px;
top: 100px;
}
.steps__circle--2 {
left: 250px;
top: 175px;
}
.steps__circle--3) {
left: 120px;
top: 250px;
}
.steps__circle--4 {
left: 777px;
top: 383px;
}
.steps__circle--5 {
left: 940px;
top: 465px;
}
.steps__circle--6 {
left: 860px;
top: 570px;
}
.steps__green {
background: #057D39;
background-clip: padding-box;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var steps=$('.steps__circle');
$(window).scroll(function () {
var stepsOffset = $('#steps').offset();
var currentScroll = $(this).scrollTop();
var windowheight = $(window).height();
steps.removeClass('steps__green');
if (stepsOffset.top < currentScroll + windowheight - 100) {
var i = 0;
if (stepsOffset.top <currentScroll + windowheight - 100) i = 0;
if (stepsOffset.top <currentScroll + windowheight - 200) i = 1;
if (stepsOffset.top <currentScroll + windowheight - 300) i = 2;
if (stepsOffset.top <currentScroll + windowheight - 400) i = 3;
if (stepsOffset.top <currentScroll + windowheight - 500) i = 4;
if (stepsOffset.top <currentScroll + windowheight - 600) i = 5;
steps.eq(i).addClass('steps__green');
}
});
});
</script>
</head>
<body> <p></p>
<div>...</div>
<div>...</div>
<div>...</div>
<section id="steps">
<div class="steps__circle steps__circle--1">1</div>
<div class="steps__circle steps__circle--2">2</div>
<div class="steps__circle steps__circle--3">3</div>
<div class="steps__circle steps__circle--4">4</div>
<div class="steps__circle steps__circle--5">5</div>
<div class="steps__circle steps__circle--6">6</div>
</section>
<div>...</div>
<div>...</div>
<div>...</div>
</body>
</html>