Javascript-форум - Движение элемента при скролле

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Движение элемента при скролле (https://javascript.ru/forum/misc/54147-dvizhenie-ehlementa-pri-skrolle.html)

Движение элемента при скролле

Подскажите, пожалуйста, как лучше реализовать падение капельки.:help:
Пока только выходит сделать одно падение, а мне надо чтобы при откате сролла, затем при повторном сролле снова происходило событие... И так бесконечно.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
  .wrapper {
    width: 400px;
    height: 400px;
    overflow: auto;
    border: 1px dashed #ccc;
    position: relative;
  }
  .wrapper-inner {
    height: 150%;
  }
  .drop {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: blue;
    position: fixed;
    top: 20px;
    left: 20%;
    margin-left: -25px;
  }
  .drop::after {
    position: absolute;
    bottom: -21px;
    left: 13px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px;
    border-color: blue transparent transparent transparent;
  }
</style>
  <div class="wrapper">
    <div class="wrapper-inner">
      <div class="drop"></div>
    </div>
  </div>
<script>
   var mainScroll = $('.wrapper'),
       innerHeight = $('.wrapper-inner').outerHeight(),
       outerHeight = $('.wrapper').innerHeight(),
       drop = $('.drop'),
       dropTop = $('.drop').position().top,
       i = 0;

   mainScroll.scroll(function (){
   scrollBottom = innerHeight - outerHeight + mainScroll.scrollTop() - 50;
   // console.log(scrollBottom)

     i++;
     // console.log(i)
     if (i == 1) {
      downDrop();
     } 

   });

   function downDrop() {
    drop.css('top', ++dropTop);

    var time = setTimeout(downDrop, 'fast');
    var z = parseInt($(drop).css('top'), 10);
    // console.log(z)
    if (z > scrollBottom) {
      drop.fadeOut('fast', function(){
        clearTimeout(time);
        drop.css('top', 19).fadeIn();
        mainScroll.animate({
          scrollTop: 0
        }, 0)
      });
    }
   }
</script>

никто не хочет мне помочь, в моем чань скрипте(
все-равно решил, но немножко по-другому

hhh,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
  .wrapper {
    width: 400px;
    height: 400px;
    overflow: auto;
    border: 1px dashed #ccc;
    position: relative;
    z-index: 10;
  }
  .wrapper-inner {
     position: relative;
    height: 150%;
  }
  .drop {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: blue;
    position: fixed;
    top: 20px;
    left: 20%;
    margin-left: -25px;
    z-index: 1;

  }
  .drop::after {
    position: absolute;
    bottom: -21px;
    left: 13px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px;
    border-color: blue transparent transparent transparent;
  }
</style>
  <div class="wrapper">
    <div class="wrapper-inner">
      <div class="drop"></div>
    </div>
  </div>
<script>
   var mainScroll = $('.wrapper'),
       drop = $('.drop'),
       height = mainScroll.height()-drop.height()-19,
       i = 0;
   mainScroll.scroll(function (){
  !i  && (i = mainScroll.scrollTop())&& downDrop();
   });

   function downDrop() {
    drop.css('top', 19).animate({ 'top' : '+='+height
    }, 3000, function() { i = 0;  mainScroll.scrollTop(0);  drop.css('top', 19)

});



   }
</script>

</body>

</html>

Спасибо. Буду разбираться

дык а @keyframes не?

Vladij, вопрос уже два с половиной года как закрыт)
Да и каким образом это можно сделать через "keyframes"?
Суть в том, что анимация должна происходить при скролле страницы.