जब कोई तत्व दृश्य में है और पिछले स्क्रॉल नहीं किया गया है तो jQuery मार्गपॉइंट प्लगइन आग कैसे बनाएं?

Question

कृपया इस देखें:

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

आप केवल देख सकते हैं जब आप अतीत पहले लाल आयत यह नीला हो जाता है स्क्रॉल, मैं यह क्षण यह दृश्य में प्रवेश करती है नीला हो करना चाहते हैं। यही कारण है कि दूसरा कभी नीला नहीं हो जाता है क्योंकि इसके नीचे पर्याप्त स्क्रॉल करने की अनुमति देने के लिए पर्याप्त सामग्री नहीं है।

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 /> 

सीएसएस:

.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' 
     }); 

    }); 


}); 

कैसे यह रूप में जल्द ही आग बनाने के लिए के रूप में प्रश्न में तत्व में देखा जाता है और पिछले स्क्रॉल नहीं?

Answer 1

offset विकल्प निर्धारित करता है कि व्यूपॉइंट के शीर्ष के संबंध में किस तरह से रास्ता तय करना चाहिए। डिफ़ॉल्ट रूप से यह 0 है, इसलिए जब आपका शीर्ष शीर्ष पर जाता है तो आपका तत्व आग लग जाता है। क्योंकि आप जो चाहते हैं वह आम है, जब पूरे तत्व को देखने में ऑफसेट को ऑफसेट करने के लिए मार्गपॉइंट्स में एक साधारण उपनाम शामिल होता है।

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

आप इसे आग जब किसी भी भाग नीचे से तत्व peeks की, आप '100%' के लिए यह निर्धारित करना चाहिए चाहते हैं।

Answer 2

मेरे लिए काम नहीं करेगा। मेरे पास समान नाम वाले सेररल कक्षाएं हैं और यदि पेज लोड/पहला तत्व स्क्रीन पर है तो वे सभी बदल जाएंगे।

jQuery(document).ready(function(){ 

jQuery('.zoomInDownInaktiv').waypoint(function() { 
    //jQuery(this).removeClass('zoomInDownInaktiv'); 
    jQuery(this).addClass('zoomInDown'); 
}, { offset: 'bottom-in-view' }); 

});

Answer 3

ठीक है। एक समाधान मिला जो ठीक काम करता है।

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