В общем, вот, всё-таки смог сделать) Если кто-то подскажет, как сделать это без такого количества условий, буду благодарен)
<div>...</div>
<div>...</div>
<div>...</div>
<section id="steps">
<div class="steps__circle steps__circle--1"></div>
<div class="steps__circle steps__circle--2"></div>
<div class="steps__circle steps__circle--3"></div>
<div class="steps__circle steps__circle--4"></div>
<div class="steps__circle steps__circle--5"></div>
<div class="steps__circle steps__circle--6"></div>
</section>
<div>...</div>
<div>...</div>
<div>...</div>
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;
}
$(window).scroll(function () {
var stepsOffset = $('#steps').offset();
var currentScroll = $(this).scrollTop();
var windowheight = $(window).height();
if (stepsOffset.top < currentScroll + windowheight - 100) {
var steps=$('.steps__circle');
if (stepsOffset.top <currentScroll + windowheight - 100) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--1').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 200) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--2').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 300) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--3').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 400) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--4').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 500) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--5').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 600) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--6').addClass('steps__green');
}
}
});