JQuery geçiş noktaları, bir öğe görünümde olduğunda ve kaydırılmadığında nasıl eklenir?

Question

bu bakın: Eğer maviye dönmesi ilk kırmızı dikdörtgen aşağıya tararken sadece görebileceğiniz gibi, buna görünümüne girdiği an maviye dönüşür istiyorum

http://jsfiddle.net/5Zs6F/2/

. Bu sebepten ötürü ikinci maviye dönmez, çünkü onun altında ilerlemenize izin vermek için altında yeterli içerik yoktur.

HTML:

Scoll this window pane 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="box"></div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="box"></div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 

CSS:

.box { width: 250px; height: 100px; border: 2px solid red; } 

jQuery:

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() { 


    $('.box').waypoint(function() { 

     $(this).css({ 
      borderColor: 'blue' 
     }); 

    }); 


}); 

söz konusu eleman görmüş ve geçmiş kaydırılan edilmez olarak nasıl kısa sürede yangın yapılır?

Answer 1

offset seçeneği, görünüm noktasının üst noktasıyla ilişkili olarak, yol noktasının nereye ateş etmesi gerektiğini belirler. Varsayılan olarak, 0'dır, böylece öğeniz, üstüne çarptığında patlar. İstediğiniz şey yaygın olduğu için, yol noktaları, tüm öğe görüntülendiğinde ofseti ateşlemeye yönelik basit bir takma ad içerir. Bunu yaparken herhangi bir bölümü alttan eleman peeks, sen '% 100' olarak ayarlayın gerektiğini kovmak istiyorsanız

$('.box').waypoint(function() { 
    $(this).css({ 
    borderColor: 'blue' 
    }); 
}, { offset: 'bottom-in-view' }); 

.

Answer 2

Benim için çalışmaz. Aynı ada sahip serveral sınıflarım var ve eğer sayfa yüklenirse/ilk eleman ekranda ise hepsi değişecektir. ILLUSTRATORNG.

Answer 3

Tamam. İyi çalışan bir çözüm buldum.

jQuery('.zoomInDownInaktiv').waypoint(function(direction) { 
    if (direction === "down") { 
     jQuery(this.element).removeClass('zoomInDownInaktiv'); 
     jQuery(this.element).addClass('zoomInDown'); 
    } 
}, { offset: '80%' });