jQuery: जब कोई div दृश्य में आता है तो मैं किसी ईवेंट को कैसे ट्रिगर कर सकता हूं?

Question

क्या कोई तरीका है कि मैं jQuery के साथ एक ईवेंट को आग लगा सकता हूं जब पृष्ठ एक div के देखने के लिए पर्याप्त स्क्रॉल करता है?

Answer 1

मुझे लगता है कि आपको स्क्रॉल ईवेंट में हुक करना होगा और मैन्युअल रूप से जांचना होगा।

Check if element is visible after scrolling

आशा है कि मदद करता है: यहाँ एक ऐसी ही सवाल है।

बॉब

Answer 2

वेपोइंट प्लग इन को इस और अधिक शामिल हैं। http://imakewebthings.com/jquery-waypoints/

डॉक्स: http://imakewebthings.com/jquery-waypoints/#docs

जैसे:

$('.someSelector').waypoint(function(direction){ 
//do stuff 
},{ 
//bottom-in-view will ensure event is thrown when the element's bottom crosses 
//bottom of viewport. 
offset: 'bottom-in-view' 
}); 

Answer 3

यदि आप जब दृश्य के निचले भाग, अपनी सामग्री के शीर्ष, तो आप इस समारोह का उपयोग कर सकते मारा एक समारोह ट्रिगर करना चाहते हैं:

$('.ModuleWrapper').waypoint(function (direction) { 
    // Codes Here 
}, { 
    offset: function() { 
     return $(this).height(); 
    } 
}); 

या जब दृश्य के नीचे, अपनी सामग्री के नीचे हिट करें, तो आप इस फ़ंक्शन का भी उपयोग कर सकते हैं:

$('.ModuleWrapper').waypoint(function (direction) { 
    // Codes Here 
}, { 
    offset: function() { 
     return -1 * $(this).height(); 
    } 
}); 

यह waypoint

Answer 4

एक jQuery प्लगइन है कि जब एक तत्व दृश्य में स्क्रॉल किया जाता है पता लगाने के लिए एक bindable 'ध्यान में रखते हुए' घटना जोड़ता है।

https://github.com/protonet/jquery.inview

Answer 5

आप केवल एक बार सक्रिय करने की जरूरत है:

$(window).scroll(function(){ 
    // This is then function used to detect if the element is scrolled into view 
    function elementScrolled(elem) 
    { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop)); 
    } 

    // This is where we use the function to detect if ".box2" is scrolled into view, and when it is add the class ".animated" to the <p> child element 
    if(elementScrolled('. box2')) { 


    // Your function here 

    } 
}); 

पूर्ण जवाब: https://www.thewebtaylor.com/articles/how-to-detect-if-an-element-is-scrolled-into-view-using-jquery