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

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

html

---

难道你不能给固定div一个中性颜色，让它环绕其内容，而不必求助于客户端脚本来动态更改颜色吗？我对固定元素进行了一些消毒，使其看起来更吸引人……填充、边距等

#left_side
{
    position:fixed;
    left: 20px;
    top:10px;
    z-index:999;
    background-color:#eee;
    padding:10px;
}

已更新。。看到这把小提琴了吗

$（文档）。滚动（函数（）{
var top=$（document）.scrollTop（）-322；
console.log（顶部）
如果（top0&&top322&&top644&&top966&&top要执行您要求的操作，可以使用jquery执行此操作：


var\u li，\u段；
$（函数（）{
_li=$（“#我的菜单”）。查找（“li”）；
_sections=$（“#包装器”）。查找（“.section”）；
$（窗口）.on（'scroll'，liBgs）；
});
函数liBgs（）{
对于（变量i=0；i<\u li.length；i++）{
var _litop=_li.eq（i）.offset（）.top；
对于（var j=0；j<_sections.length；j++）{
var$s=_部分等式（j），
_sectop=$s.offset（）.top，
_secbottom=$s.offset（）.top+$s.height（）-20；
如果（\u litop>\u sectop&&u litop>\u secbottom）{
var_color=rgb2hex（$s.css（'background-color'））；
_li.eq（i）.find（'a'）.css（'color'），（_color==“#ffffff”）？“#000000”：“#ffffff”）；
}             
}
}
}
函数rgb2hex（rgb）{
rgb=rgb.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
函数十六进制（x）{
返回（“0”+parseInt（x）.toString（16））.slice（-2）；
}
返回“#”+hex（rgb[1]）+hex（rgb[2]）+hex（rgb[3]）；
}

注意：rgb2hex（）函数取自此问题：
此代码的作用是：
我基本上是比较菜单的位置，李的部分，检查下什么
每次滚动时，每个li都会结束。我不确定这是否非常有效，但对于小规模的产品来说，这是可以的。如果有人知道如何提高效率，我很乐意学习。
使用jquery来完成此操作。找到了一个参考

HTML:

添加了一个额外的颜色属性

<div class="section" id="section1" data-color="#333">section1</div>

第1节

JS:

$（窗口）.on（'scroll'，function（）{
var scrollTop=$（this.scrollTop（）；
$（'.section'）。每个（函数（）{
var topDistance=$（this）.offset（）.top；
如果（（顶部距离）<滚动顶部）{
$（'#mymenu a'）.css（'color'，$（this.attr（'data-color'））；
}
});

}))

类似的方法可以：

$(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');
        }
    });
});

我给
.section
div一个固定的高度，因为我使用的JS使用固定的像素值，并且如果没有定义元素，并非所有浏览器对元素高度的解释都是相同的

这里有一个提琴：
提琴链接不起作用！嗨，先生，它现在已经起作用了。为什么不这样做呢？谢谢你的回答，先生！我可以这样做，但这在设计方面并不好。我必须遵循设计中的内容：（我的意思是在PSD中，我应该遵循。是的，但是当用户滚动锚点时，锚点会根据背景一个接一个地改变。因此，如果导航列表5的颜色为白色，背景为黑色，则其余的链接为黑色。如果黑色背景达到第四个列表（从上方开始），导航列表5和4的字体颜色为白色，1,2和3仍然为黑色您想使用滚动事件吗？是的，先生，我已经这样做了。除了知道每个锚是否在新div下面的正确代码
$(document).scroll(function(){
var top=$(document).scrollTop()-322;
console.log(top)
if(top<0)
{
$('.mainLeft li a').css('color','black')
    $('#li1 a').css('color',$('#section1').css('color'))
    //$('#li1 a').css('color',"red")
}
if(top>0 && top<322)
{
    $('.mainLeft li a').css('color','black')
    $('#li2 a').css('color',$('#section2').css('color'))
    //$('#li1 a').css('color',"red")
}
    if(top>322 && top<644)
{
    $('.mainLeft li a').css('color','black')
    $('#li3 a').css('color',$('#section3').css('color'))
    //$('#li1 a').css('color',"red")
}
if(top>644 && top<966)
{
    $('.mainLeft li a').css('color','black')
    $('#li4 a').css('color',$('#section4').css('color'))
    //$('#li1 a').css('color',"red")
}
    if(top>966 && top<1288)
{
    $('.mainLeft li a').css('color','black')
    $('#li5 a').css('color',$('#section5').css('color'))
    //$('#li1 a').css('color',"red")
}

});

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]);
}

<div class="section" id="section1" data-color="#333">section1</div>

$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
$('.section').each(function() {
    var topDistance = $(this).offset().top;
    if ( (topDistance) < scrollTop ) {
        $('#mymenu a').css('color',$(this).attr('data-color'));
    }
});

$(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');
        }
    });
});

.mainLeft li.whiteText a {
    color: #fff;
}
.section {
    height: 18px;
    overflow: hidden;
}