根據下面的顏色更改粘性導航顏色

Question

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

我想要實現的是，當您滾動時，javascript 函數會根據該 div 的類名（或數據屬性，以哪個為准）主動確定粘性導航是位於淺色內容 div 還是深色內容 div 之上，並更改粘性導航中文本的顏色，因此它在內容 div 上可見。

小提琴

目前我沒有啟動任何 javascript，因為我不知道如何檢測一個 div 是否在另一個 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>

Answer 2

對於這種事情，這個插件就是胡扯。 https://github.com/Aerolab/midnight.js

Answer 3

卡布亞，大家。 我為你找到了這個： http : //jsfiddle.net/Niffler/z34cG/

嘗試添加這個

$(window).scroll(function() {

    /* get current scroll-position within window */
    var scroll = $(window).scrollTop();
    
    $('.mainLeft li').each(function() {

        /* get position of navigation-element (distance from top minus half of it's height, so that it changes color while it's half over black and half over white background) */
        var elementPositionTop = parseFloat($(this).offset().top) + (parseFloat($(this).height() / 2));

        /* change color for each background-change */
        if (elementPositionTop >= 320 && elementPositionTop <= 640 || elementPositionTop >= 960 && elementPositionTop <= 1280) {
            $(this).addClass('whiteText');
        } else {
            $(this).removeClass('whiteText');
        }
    });
});