jQuery addClass на основе того, насколько далеко прокручивается

Question

Я написал несколько jquery, чтобы вычислить высоту 4 элементов по классу css и получить их высоту, а затем сравнить высоту с тем, насколько далеко прокручена страница. Если страница прокручивается или проходит мимо каждого элемента, добавляется класс css, который анимирует элемент.

Проблема, с которой я сталкиваюсь, заключается в том, что jquery добавляет классы ко всем элементам, как только страница прокручивается к первому элементу, а не добавляет класс к каждому, пока он прокручивается.

Что не так с моим jquery, что он делает это?

Вот jsfiddle http://jsfiddle.net/94kP6/7/

Это JQuery часть кода

// element animation scroll detection 
(function ($, document, undefined) { 
    var animation1 = $('.animation1').height(); 
    var animation2 = $('.animation2').height(); 
    var animation3 = $('.animation3').height(); 
    var animation4 = $('.animation4').height(); 

    $(window).scroll(function() { 
     var winTop = $(window).scrollTop(); 
     if(winTop >= (animation1)){ 
     $('.animation1').addClass("animate-from-left"); 
     } 
     if(winTop >= (animation2)){ 
     $('.animation2').addClass("animate-from-right"); 
     } 
     if(winTop >= (animation3)){ 
     $('.animation3').addClass("animate-from-left"); 
     } 
     if(winTop >= (animation4)){ 
     $('.animation4').addClass("animate-from-right"); 
     } 
    }); 
})(jQuery, document); 

Answer 1

var animation1 = $('.animation1').height(); 
var animation2 = $('.animation2').height(); 
var animation3 = $('.animation3').height(); 
var animation4 = $('.animation4').height(); 

должен быть

var animation1 = $('.animation1').offset().top; 
var animation2 = $('.animation2').offset().top; 
var animation3 = $('.animation3').offset().top; 
var animation4 = $('.animation4').offset().top; 

или какой-либо вариант для личных предпочтений, как это :

var animation1 = $('.animation1').position().top - $('.animation1').height(); 
var animation2 = $('.animation2').position().top - $('.animation2').height(); 
var animation3 = $('.animation3').position().top - $('.animation3').height(); 
var animation4 = $('.animation4').position().top - $('.animation4').height(); 

Answer 2

Вот скрипку, чтобы показать, что вам нужно использовать .offset().top вместо .height

http://jsfiddle.net/94kP6/10/

При использовании height, вы просите свиток подождать, пока высоту объекта вместо того, чтобы ждать верхнего расположения объекта

Просто измените height с до offset s

UPDATE http://jsfiddle.net/94kP6/14/ Это делает его таким образом, анимацию можно увидеть больше в середине экрана. Просто вычтите указанную высоту (в данном случае, высоту объекта) из смещения, и она будет анимироваться на более высоком scrollTop.

Вы также можете сделать то же самое, только в обратном направлении, добавив определенное количество в var winTop = $(window).scrollTop(); линии, линии это: var winTop = $(window).scrollTop() + 250;