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

Question

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

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做到这一点：

工作小提琴

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（）函数来自以下问题： 如何获取十六进制颜色值而不是RGB值？

该代码的作用：

我基本上是将菜单li的位置与各部分进行比较，每次滚动时都检查每个li处于哪个部分下。我不确定这是否非常有效，但是对于小规模的事情来说还可以..如果有人知道如何为了提高效率，我将很高兴学习。

Answer 2

使用jQuery来做到这一点。 在这里找到参考

HTML：

增加了颜色的额外属性

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

JS：

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

}）;

DEMO

Answer 3

您不能只给固定div赋予中性颜色并使其环绕其内容，而不必借助客户端脚本来动态更改颜色吗？ 我对固定元素进行了一些消毒，以使其看起来更具吸引力……填充，边距等。

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

JS Fiddler示例

Answer 4

更新..看到这个小提琴不要ü的意思是这样

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

});

Answer 5

这样的事情会起作用：

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

这是其他CSS：

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

我给.section divs设置了固定的高度，因为我使用的JS使用固定的像素值，并且并非所有浏览器都将未定义的元素的高度解释为相同的...

这是一个小提琴： http : //jsfiddle.net/Niffler/z34cG/