वर्तमान दृश्य

Question

पर आधारित स्क्रोलो का उपयोग करते समय सक्रिय लिंक हाइलाइट करें मेरे पास एक वेबसाइट है जो एक पृष्ठ है और उपयोगकर्ता स्क्रॉलटो jquery प्लगइन का उपयोग करने वाले लिंक का उपयोग करके प्रत्येक अनुभाग में नेविगेट करता है।

मेरी समस्या है: मैं मुख्य मेनू में सक्रिय लिंक दिखाना चाहता हूं। तो यदि आप संपर्क फ़ॉर्म पर स्क्रॉल करते हैं तो संपर्क लिंक हाइलाइट किया जाता है। अब मैं क्लिक करने के बाद कक्षा जोड़कर jquery में ऐसा कर सकता था। यदि ऐसा किया जाता है यदि कोई उपयोगकर्ता किसी अन्य अनुभाग में मैन्युअल रूप से स्क्रॉल करना था, तो संपर्क लिंक अभी भी सक्रिय होगा, जो गलत और भ्रामक होगा।

तो मेरे विचार किसी भी तरह से काम करेंगे कि कौन सी div आईडी वर्तमान में देख रही है। मैं वास्तव में समझ नहीं पा रहा हूं कि हालांकि ऐसा कैसे करें। कोई विचार?

Answer 1

यह आपको मैनुअल स्क्रॉल ओवरराइड जोड़ने के लिए काम करना चाहिए:

$(function(){ 
    var sections = {}, 
     _height = $(window).height(), 
     i  = 0; 

    // Grab positions of our sections 
    $('.section').each(function(){ 
     sections[this.name] = $(this).offset().top; 
    }); 

    $(document).scroll(function(){ 
     var pos = $(this).scrollTop(); 

     // Look in the sections object and see if any section is viewable on the screen. 
     // If two are viewable, the lower one will be the active one. 
     for(i in sections){ 
      if(sections[i] > pos && sections[i] < pos + _height){ 
       $('a').removeClass('active'); 
       $('#nav_' + i).addClass('active'); 
      } 
     } 
    }); 
}); 

डेमो: http://jsfiddle.net/x3V6Y/