Изменение наклейки цвета на основе цвета ниже нижнего

Question

В основном на моем сайте у меня есть липкий навигатор с прозрачным фоном. Ниже, что у меня есть светлые или темные цветные div.

То, что я пытаюсь достичь, так же, как вы прокручиваете, функция javascript активно определяет, находится ли липкий навигатор поверх светлого или темного содержимого div на основе этого имени класса div (или атрибута данных, в зависимости от того, , и изменение цвета текста в липкой навигационной панели, чтобы оно было видно по содержимому div.

Fiddle

В настоящее время у меня нет какой-либо Javascript начал, как я не знаю, как определить, если один DIV находится над другой. Но, как вы можете видеть, после того, как липкий nav находится над темным содержимым 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

Fiddle рабочий:

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>