基於div下面的顏色更改粘貼的導航顏色

Question

基本上在我的網站上，我有一個粘性導航具有透明背景。在那之下我有淺或深色的內容divs。

我想要實現的是，當您滾動時，javascript函數正在主動確定粘性導航是基於div的類名（或數據屬性，無論哪一個） ，並改變粘滯導航文本的顏色，以便在內容div上可見。

Fiddle

目前我沒有任何JavaScript開始作爲我不知道如何來檢測，如果一個DIV是另一些人。但正如你所看到的，一旦粘性導航結束了黑暗的內容div，我需要將字體顏色更改爲更淺的顏色，一旦它返回到淺色內容div，我需要將顏色更改爲更深的顏色。

示例HTML：

<div id="sticky">Menu</div> 
<div class="content light"></div> 
<div class="content dark"></div> 
<div class="content light"></div> 
<div class="content dark"></div> 
<div class="content light"></div> 

提前感謝！

Answer 1

小提琴工作：

http://jsfiddle.net/bbazcyc8/1/

var stickyOffset = $("#sticky").offset(); 
var $contentDivs = $(".content"); 
$(document).scroll(function() { 
    $contentDivs.each(function(k) { 
     var _thisOffset = $(this).offset(); 
     var _actPosition = _thisOffset.top - $(window).scrollTop(); 
     if (_actPosition < stickyOffset.top && _actPosition + $(this).height() > 0) { 
      $("#current").html("Current div under sticky is: " + $(this).attr("class")); 
      $("#sticky").removeClass("light dark").addClass($(this).hasClass("light") ? "light" : "dark"); 
      return false; 
     } 
    }); 
}); 

<div> 
    <div id="sticky">Menu <span id="current"></span></div> 
    <div class="content light"></div> 
    <div class="content dark"></div> 
    <div class="content light"></div> 
    <div class="content dark"></div> 
    <div class="content light"></div> 
</div>