基于div下面的颜色更改粘贴的导航颜色

基本上在我的网站上，我有一个粘性导航具有透明背景。在那之下我有浅或深色的内容divs。基于div下面的颜色更改粘贴的导航颜色

我想要实现的是，当您滚动时，javascript函数正在主动确定粘性导航是基于div的类名（或数据属性，无论哪一个），并改变粘滞导航文本的颜色，以便在内容div上可见。

目前我没有任何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>

提前感谢！

来源

2014-12-04 Corey

这可能是有用的：http://stackoverflow.com/questions/19661108/detect-element-if-over-another-element-via- using-css3-transform – 2014-12-04 16:27:57

小提琴工作：

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>

来源

2014-12-04 16:32:21 Cito

This works！但有一个问题，只有在导航覆盖了1/2的情况下才有改变类的方法，所以它在文本的中心位置发生了变化。更新小提琴：http://jsfiddle.net/tenold/bbazcyc8/3/ – Corey 2014-12-04 17:05:36

这是我做了什么，如果有人感兴趣，我会让类在粘性导航的中心发生变化：http://jsfiddle.net/tenold/ bbazcyc8/5/ – Corey 2014-12-04 18:02:40

对不起，我刚看到评论。是的，你的解决方案是好的;）很高兴提供帮助 – Cito 2014-12-04 20:27:27

基于div下面的颜色更改粘贴的导航颜色

回答

相关问题