क्या jQuery निर्धारित कर सकता है कि वर्तमान में उपयोगकर्ता के ब्राउज़र दृश्य में कौन से divs वर्तमान में हैं?

Question

यह निर्धारित करने के लिए जो div वर्तमान ब्राउज़र के ध्यान में रखते हुए है, और फिर कोई ईवेंट सक्रिय करें ऐसा होता है संभव है? असल में, मेरे पास एक ऐसी वेबसाइट है जिसमें एक पृष्ठ पर 5-6 अनुभाग हैं और मैं वर्तमान में ब्राउज़र पर कौन सा अनुभाग देख रहा हूं, इस पर निर्भर करता हूं कि मैं घटनाओं को आग लगाना चाहता हूं। मुझे पता है कि हम hrefs में # टैग का उपयोग करके सीधे किसी पृष्ठ की स्थिति से लिंक कर सकते हैं, लेकिन क्या यह संभव है कि ब्राउज़र पर मुख्य दृश्य में कौन सा है?

Answer 1

हाँ, आप ऐसा कर सकते हैं। कि पीछे मूल विचार स्क्रॉल को देखने के लिए और निर्धारित करने के लिए जो अपने sections के उपयोगकर्ता द्वारा ध्यान केंद्रित कर रहा है। इस के लिए एक अच्छा अनुमान आमतौर पर खंड, जो आपके व्यूपोर्ट के शीर्ष के बगल में है है:

$(document).scroll(function() { 
    var $this = $(this), 
     scrollTop = $this.scrollTop(), 
     // find the section next to the current scroll top 
     sections = $(this).find('section'), 
     topSection = null, 
     minDist = Infinity; 

    sections.each(function() { 
    // calculate top and bottom offset of the section 
    var top = $(this).offset().top, 
     bottom = top + $(this).innerHeight(), 
     // only use the minimum distance to the scroll top 
     relativeDistance = Math.min(
      Math.abs(top - scrollTop), 
      Math.abs(bottom - scrollTop) 
     ); 
    // in case the distance is smaller than 
    // the previous one's replace it 
    if (relativeDistance < minDist) { 
     minDist = relativeDistance; 
     topSection = this; 
    } 
    }); 

    // flip the 'top' class from current to now next one 
    $('section.top').removeClass('top'); 
    $(topSection).addClass('top');  
}); 

आप Play Webframework's Homepage

पर इस का एक काफी अच्छा उदाहरण देख सकते हैं कि काफी क्या नहीं है आप चाहते हैं, तो आप पूरी offset या किसी तत्व की position निरीक्षण और $(window).innerWidth() या $(window).innerHeight() का उपयोग कर

अद्यतन जोड़ा गया एक 01 वर्तमान व्यूपोर्ट की तुलना कर सकते हैं कार्रवाई में इसे देखने के लिए। आनंद लें;)