javascript - 根据背景更改导航字体颜色

Question

我的问题是这样的。我有一个固定的左侧导航栏，我必须根据其下方部分的背景更改列表字体颜色。代码是这样的fiddle .因此，如果该部分是黑色的并且位于链接下方，则看不到文本。我必须根据其下方部分的背景更改每个列表，以便其可读。

html

<div class="content">
    <div id="left_side">
        <div id="static_menu" class="">                 
            <div id="main_navigation" class="">
                <ul class="menu mainLeft" id="mymenu">
                    <li><a href="#section1">Nav list 1</a></li>
                    <li><a href="#section2">Nav list 2</a></li>
                    <li><a href="#section3">Nav list 3</a></li>
                    <li><a href="#section4">Nav list 4</a></li>
                    <li><a href="#section5">Nav list 5</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="wrapper">
        <div class="section" id="section1">section1</div>
        <div class="section" id="section2">section2</div>
        <div class="section" id="section3">section3</div>
        <div class="section" id="section4">section4</div>
        <div class="section" id="section5">section5</div>
    </div>
</div>

CSS

.content{
    position:relative;
}

#left_side
{
    position:fixed;
    left: 20px;
    right: 20px;
    z-index:999;
}
.mainLeft
{
    list-style-type:none;
    margin-left:0px;
    padding-left:0px;
}
.mainLeft li
{
    padding:5px 0;
}
.mainLeft li a
{
    color:#000;
    margin-bottom:5px;
}

#wrapper
{
    position:relative;
}

.section
{
    width: 100%;
    text-align:center;
    padding:150px 0;
    border:1px solid #666;
}

#section1
{
    background: #fff;
}

#section2
{
    background: #000;
    color:#fff;
}

#section3
{
    background: #fff;
}

#section4
{
    background: #000;
    color:#fff;
}

#section5
{
    background: #fff;
}

Fiddel

Answer 1

要执行您要求的操作，您可以使用 jquery 执行此操作:

working fiddle

var _li, _sections;

$(function() {
   _li = $("#mymenu").find("li"); 
    _sections =  $("#wrapper").find(".section");   
    $(window).on('scroll', liBgs);
});


function liBgs() {
    for (var i = 0; i < _li.length ; i++) {
        var _litop = _li.eq(i).offset().top; 
        for (var j = 0; j < _sections.length; j++) {
            var $s = _sections.eq(j),
            _sectop = $s.offset().top,
            _secbottom = $s.offset().top+$s.height()-20;
            if (_litop > _sectop && _litop > _secbottom) {
                var _color = rgb2hex($s.css('background-color'));
                _li.eq(i).find('a').css('color',  (_color=="#ffffff") ? "#000000" : "#ffffff");
            }             
        }
    }
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

注意:rgb2hex() 函数取自这个问题:How to get hex color value rather than RGB value?

这段代码的作用:

我基本上是在比较菜单 li 和各部分的位置，检查在什么下每次滚动时，每个 li 部分都结束了。我不确定这是否非常有效，但对于小规模的东西没关系。如果有人知道如何使它更有效率，我会很乐意学习。