jquery erkennen Überlappung mehrere Abschnitte

Question

Ich versuche, meine feste Navigation Farbe ändern, wenn es verschiedene Teile meiner Website überlappt. Ähnlich wie die Navigation auf dieser Website: http://andpizza.com/

Mein HTML besteht aus Divs und Abschnitte.

<nav> 
    <ul> 
    <li class="work">Work</li> 
    <li class="about">About</li> 
    <li class="contact">Contact</li> 
</nav> 

<div id="red"> 
</div> 

<section id="green"> 
</section> 

<div id="blue"> 
</div> 

<section id="yellow"> 
</section> 

Für die JS verwende ich ein overlaps library ich auf Github gefunden.

Dieses jquery ich mich hinzugefügt:

$(document).scroll(function() { 

    var contactColl = $('ul li.contact').overlaps('section'); 
    $('ul li.contact')[contactColl.hits.length? 'addClass' : 'removeClass']('white'); 

    var aboutColl = $('ul li.about').overlaps('section'); 
    $('ul li.about')[aboutColl.hits.length? 'addClass' : 'removeClass']('white'); 

    var workColl = $('ul li.work').overlaps('section'); 
    $('ul li.work')[workColl.hits.length? 'addClass' : 'removeClass']('white'); 

}); 

Oder Ansicht here on Codepen.

Es funktioniert perfekt für den ersten Abschnitt. Aber es ignoriert den zweiten Abschnitt. Ich bekomme, dass es den ersten Abschnitt wählt, der es kommt, , aber ich kann nicht herausfinden, wie man es für den anderen Abschnitt (en) arbeiten lässt.

Ich habe versucht, die Abschnitte separat wie folgt zu benennen:

var contactColl = $('ul li.contact').overlaps('#green, #yellow'); 

oder

var contactColl = $('ul li.contact').overlaps('#green'); 
$('ul li.contact')[contactColl.hits.length? 'addClass' : 'removeClass']('white'); 

var contactColl2 = $('ul li.contact').overlaps('#yellow'); 
$('ul li.contact')[contactColl2.hits.length? 'addClass' : 'removeClass']('white'); 

Dies alles nur brach.

Kann mir jemand dabei helfen?

Answer 1

Das Overlaps-Plugin behandelt nur ein Objekt, über das sich Ihr Ziel überlappt. nur ein kleiner Fix wie folgt:

$.fn.overlaps = function(objs) { 
    var elems = {targets: [], hits:[]}; 
    this.each(function() { 
     var bounds = $(this).offset(); 
     bounds.right = bounds.left + $(this).outerWidth(); 
     bounds.bottom = bounds.top + $(this).outerHeight(); 

     $(objs).each(function(){ 
      var obj = this; 
      var compare = $(obj).offset();    
      compare.right = compare.left + $(obj).outerWidth(); 
      compare.bottom = compare.top + $(obj).outerHeight(); 

      if (!(compare.right < bounds.left || 
       compare.left > bounds.right || 
       compare.bottom < bounds.top || 
       compare.top > bounds.bottom) 
      ) { 
       elems.targets.push(this); 
       elems.hits.push(obj); 
      } 
     }); 
    }); 

    return elems; 
}; 

} (jQuery));

Iterating durch eine Sammlung von Objekten $ (Objs) .Each statt nur die erste von ihnen zu nehmen - wird das beheben.

Working demo