JQuery फीड-एक div में जब उपयोगकर्ता उस div को स्क्रॉल करता है

Question

एक तत्व <div class=""> उपयोगकर्ता उस div पर स्क्रॉल करते समय फीका होगा।

मुझे एक jQuery प्लगइन का उपयोग करके एक समाधान मिला और यह जांचने के लिए एक और समाधान है कि पृष्ठ पर div दिखाई दे रहा है या नहीं। यह काम करता हैं।

हालांकि, जैसे ही उपयोगकर्ता div के शीर्ष पर स्क्रॉल करता है, यह बहुत जल्द ही फीका होता है, इसलिए उपयोगकर्ता को div fade में नहीं दिखता है। मैं div को कैसे फीका कर सकता हूं- केवल उपयोगकर्ता ही स्क्रॉल करता है div के नीचे ताकि उपयोगकर्ता पूरे div के लिए एक अच्छा फीका प्रभाव में देख सकें?

Answer 1

आप का उल्लेख किया है कि आप एक jQuery प्लगइन का इस्तेमाल किया, मैं अगर आप jQuery waypoints प्लगइन की कोशिश की है पता नहीं है, इस प्रकार आप इसे इस प्लगइन का उपयोग कर आसानी से प्लगइन को एक ऑफसेट विकल्प पास करके कर सकते हैं:

// by default your element will be hidden 
$('div').hide(); 
// call waypoint plugin 
$('div').waypoint(function(event, direction) { 
    // do your fade in here 
    $(this).fadeIn(); 
}, { 
    offset: function() { 
     // The bottom of the element is in view 
     return $.waypoints('viewportHeight') - $(this).outerHeight(); 
    } 
}); 

ऑफसेट: यह निर्धारित करता है कि तत्व विंडो का शीर्ष ब्राउज़र विंडो के शीर्ष से कितना दूर होना चाहिए ताकि एक मार्ग बिंदु ट्रिगर किया जा सके। यह एक संख्या हो सकती है, जिसे कई पिक्सल के रूप में लिया जाता है, एक स्ट्रिंग व्यूपोर्ट ऊंचाई का प्रतिशत दर्शाती है, या एक फ़ंक्शन जो कई पिक्सल लौटाएगा।

इसलिए पिछले उदाहरण पर, आपका div पृष्ठ के मध्य में तब तक फीका नहीं होगा जब तक कि यह पृष्ठ के मध्य में न हो।

Answer 2

यह जावास्क्रिप्ट कोड संभवतः आपके द्वारा उपयोग किए जाने वाले कार्यों के समान है, ऑफ़सेट का उपयोग करने वाला एकमात्र अंतर है, जो केवल लक्ष्य तत्व का offset().top() + तत्व का height() है। डेमो कोड कई <li> तत्वों में फीका होता है क्योंकि तत्वों के निचले भाग में आते हैं।

tiles = $("ul#tiles li").fadeTo(0,0); 

$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).fadeTo(500,1); 
    }); 
}); 

डेमो:jsfiddle.net/Marcel/BP6rq (fullscreen)