Показать сообщение отдельно
  #1 (permalink)  
Старый 05.03.2015, 15:20
hhh hhh вне форума
Профессор
Отправить личное сообщение для hhh Посмотреть профиль Найти все сообщения от hhh
 
Регистрация: 19.11.2013
Сообщений: 150

Движение элемента при скролле
Подскажите, пожалуйста, как лучше реализовать падение капельки.
Пока только выходит сделать одно падение, а мне надо чтобы при откате сролла, затем при повторном сролле снова происходило событие... И так бесконечно.
<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>
Ответить с цитированием