jqueryが複数のセクションを重複して検出する

Question

ウェブサイトの異なる部分が重複している場合、固定ナビゲーションの色を変更しようとしています。 このウェブサイトのナビゲーションとよく似ています：http://andpizza.com/

私のHTMLはdivとセクションに存在します。

<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> 

JSの場合、私はoverlaps libraryをgithubで見つけました。

このjQueryの私は自分自身を追加しました：

$(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'); 

}); 

またはビューhere on Codepen。

最初のセクションでは完全に機能します。しかし、それは第2セクションを無視する。 の最初のセクションが選択されていますが、他のセクション（）で動作させる方法を理解できません。

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'); 

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

または

これはちょうど、すべてを壊した：

私はこのような個別のセクションに名前を付けてみました。

誰でも私にこれを手伝ってもらえますか？

Answer 1

オーバーラップのプラグインは、ターゲットがオーバーラップする1つのオブジェクトのみを扱います。次のようにちょっと修正してください：

$.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））;

最初のものを取るのではなく、オブジェクトのコレクション$（objs）.eachを繰り返します。これを修正します。同時に黄色と緑のために - あなたは二つのセクションに同じメニュー李を選択しない理由

Working demo