Change navigation font color based on background

Question

My problem is this. I have a fixed left navigation bar and I have to change the list font color based on the background of the section under it. The code is like this fiddle. So

Answer 1

Something like this would work:

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

Here's the additional CSS:

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

I gave the .section divs a fixed height because the JS I used works with fixed pixel values, and not all browsers interpret the height of elements the same if they're not defined...

Here's a fiddle: http://jsfiddle.net/Niffler/z34cG/

Answer 2

To do what you asked for you can do this with 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]);
}

NOTE: rgb2hex() function was taken from this question: How to get hex color value rather than RGB value?

What this code does:

I'm basically comparing positions of the menu li's to the sections, checking under what section each li is over everytime you scroll.. I'm not sure this is very efficient, but for something small scale it's ok.. if anyone knows how to make this even more efficient I'll be happy to learn.

Answer 3

Used jquery to do this. Found a reference here

HTML:

Added a extra attribute of color

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

Can't you just give it a neutral colour to the fixed div and make it wrap around its content rather than have to resort to client scripts to dynamically change the colour? I have sanitized a bit the fixed element to make it look a bit more appealing...padding, margins, etc.

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

JS Fiddler Example

Answer 5

Updated.. see this fiddle Do u Mean like this

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

});