Start animacji po scrollu strony

Question

Witam,

chciałbym, aby animacja napisana przeze mnie w css odpalała się dopiero po scrollu np. o 600px.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y < 600) {
    $('.circle-middle-one').addClass('.animate-off');
  } else {
    $('.circle-middle-one').removeClass('.animate-off');
  }
});

</script>

W momencie gdy zamienię addClass na FadeIn i removeClass na FadeOut to wszystko ładnie działa, tylko wtedy mam efekt pojawiającego się diva. A mi potrzebny jest tylko start animacji po scrollu o określoną ilość px.

Ma ktoś jakiś pomysł?

Answer 1

Pomyśl logicznie i odwróć sytuację. 

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y >  600) {
    $('.circle-middle-one').addClass('.animate');
  } else {
    $('.circle-middle-one').removeClass('.animate');
  }
});

 

Answer 2

$(window).scroll(function()
{
if($(this).scrollTop()>20){

$('.circle-middle-one').addClass('.animate-off');

  } else {

    $('.circle-middle-one').removeClass('.animate-off');

  }


});

Powinno działać 

Comments

zamieszczam kawałek kodu http://codepen.io/alterwar/pen/vKGWQq

niestety ale nie wiem co robię źle, że nie działa jak powinno

---

No dobra to teraz powiedz jak by miała wyglądać ta twoja animacja pisałeś że chcesz start animacji to jest po przekroczeniu 20px od góry.

---

Chodzi o tą pomarańczową kropkę. Ona porusza się po białych liniach, jednak ich tu nie wklejałem bo nie ma takiej potrzeby. Nawet jeśli wartość 20px zamienię na wartość 1000px to i tak animacja staruje od razu po uruchomieniu strony