根据div下面的颜色更改粘性导航颜色 [英] Changing sticky nav color based on div below's color

问题描述

基本上在我的网站上，我有一个透明背景的粘性导航。在下面，我有浅色或深色的内容divs。

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

小提琴

目前我没有任何javascript开始，因为我不知道如何检测一个div是否超过另一个。但是，正如你所看到的，一旦粘性导航结束了黑暗的内容div，我需要将字体颜色更改为更浅的颜色，并且一旦它返回到浅色内容div，我需要将颜色更改为更暗的颜色。

HTML示例：

 < div id =sticky>菜单< / 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> 
  

提前致谢！

解决方案

小提琴工作：

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

  var stickyOffset = $（＃sticky） 。抵消（）; 
 var $ contentDivs = $（。content）; 
 $（document）.scroll（function（）{
 $ contentDivs.each（function（k）{
 var _thisOffset = $（this）.offset（）; 
 var _actPosition = _thisOffset.top  -  $（window）.scrollTop（）; 
 if（_actPosition< stickyOffset.top&& amp; _actPosition + $（this）.height（）> 0）{
 $（＃current）。html（粘滞状态下的当前div为：+ $（this）.attr（class））; 
 $（＃sticky）。removeClass（light dark ）.addClass（$（this）.hasClass（light）？light：dark）; 
 return false; 
} 
}）; 
}） ; 
 
< div> 
< div id =sticky>菜单< 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> 
  

Basically on my site I have a sticky nav that has a transparent background. Below that I have light or dark colored content divs.

What I'm trying to achieve is as you scroll, a javascript function is actively determining if the sticky nav is on top of a light or dark content div, based on that div's classname (or a data attribute, whichever), and changing the color of the text in the sticky nav so it's visible over the content div.

Fiddle

Currently I don't have any javascript started as I don't know how to detect if one div is over another. But as you can see, once the sticky nav is over a dark content div I need to change the font color to a lighter color, and once it's back over a light content div I need to change the color to a darker color.

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

Thanks in advance!

解决方案

Fiddle working:

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>

这篇关于根据div下面的颜色更改粘性导航颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！