Показать сообщение отдельно
  #2 (permalink)  
Старый 22.10.2016, 22:22
Новичок на форуме
Отправить личное сообщение для KowkogaB Посмотреть профиль Найти все сообщения от KowkogaB
 
Регистрация: 22.10.2016
Сообщений: 3

В общем, вот, всё-таки смог сделать) Если кто-то подскажет, как сделать это без такого количества условий, буду благодарен)

<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');
      }
   }
});

Последний раз редактировалось KowkogaB, 22.10.2016 в 23:20.
Ответить с цитированием