2012-04-27 3 views
5

Я пытаюсь анимировать boxShadow в событии прокрутки моего # контейнера div. Все работает, за исключением того, что я не могу найти хороший способ обнаружить полосу прокрутки, достигающую вершины, так что boxShadows могут анимировать. Это мой код покаОпределить, когда полоса прокрутки достигает вершины div?

$('#container').scroll(
     function() 
     { 
      $('#white').animate(
      { 
       boxShadow: "0 8px 8px -7px #696868" 
      }, 
      "fast"); 
      if ($('#container').scrollTop() == 0) 
      { 
       $('#white').animate(
       { 
        boxShadow: "0 0 0 0 #696868" 
       }, 
       "fast"); 
      } 
     } 
    ); 

Я добавил демо. Первоначально на прокрутки одушевленных работает отлично, но когда штанга возвращается к началу их довольно длинная задержка перед второй анимацией ударов в. http://jsfiddle.net/JYqC3/14/

ответ

9

Надеется, что это помогает

Используется .scrollTop

$('#my_div').scroll(function() { 
    var pos = $('#my_div').scrollTop(); 
    if (pos == 0) { 
     alert('top of the div'); 
    } 
}); 

DEMO

EDIT: улучшенная анимация, добавленная к демо

+0

Спасибо за ваш ответ. Это в основном то, что я написал, если бы я должен был поставить предупреждение в свой оператор if, он выстрелил бы прямо, когда бар попадет в верхнюю часть. По какой-то причине существует много времени для анимации, которая должна вступить в оператор if. – Wilfred

+0

здесь я редактировал jsfiddle. Прокрутите вниз и сразу увидите, как тень появляется, но когда вы прокручиваете вверх, вы должны подождать, как за 5 секунд до ее исчезновения. Я использую плагин jquery, который включен в верхнюю часть html http://jsfiddle.net/JYqC3/12/ – Wilfred

+0

, обновил мою демоверсию, ее определенно не лучший soln, у меня не было времени, поэтому сделал исправление temp – Dhiraj

Смежные вопросы