jQuery檢測重疊多個部分

我試圖讓我的固定導航更改顏色，當它重疊我的網站的不同部分。非常喜歡本網站上的導航：http://andpizza.com/jQuery檢測重疊多個部分

我的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我使用的是我在github上找到的overlaps library。

這個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。

它適用於第一部分。但它忽略了第二部分。我得到它選擇它遇到的第一部分，，但我不知道如何使其工作的其他部分。

我試過單獨命名的部分是這樣的：

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

或

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

這只是打破了一切。

有人可以幫我嗎？

來源

2016-05-30 Paul van den Dool

你爲什麼選擇兩個部分相同的菜單裏 - 在同一時間，黃色和綠色的嗎？正如我所知道的那樣，每一部分都有一個鋰電，然後就像魅力一樣工作。 https://jsfiddle.net/ofvug4nk/ –

這是一個可讀性問題。該網站是一個頁面交替的大圖像和白色部分的網站。當重疊圖像時，所有菜單項應該是白色的，當重疊白色部分時，所有菜單項應該是黑色的。例如：http://andpizza.com/ –

這個Overlaps插件沒有考慮到http://prntscr.com/ba7tx4上重疊的多個對象。現在它按預期工作https://jsfiddle.net/ofvug4nk/1/ –

Overlaps插件只處理一個對象，目標重疊。只是像這樣的小修正：

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

來源

2016-05-31 07:27:07

你剛剛爲我節省了很多頭痛，誰知道有多少小時的編碼。非常感激！ –

@PaulvdDool很高興幫助 –

jQuery檢測重疊多個部分

回答

相關問題