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

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

});