2

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 if the section is black and is below a link, the text is not seen. I have to change each list based on the background of a section under it so that it can be readable.

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

Amit Kumar
  • 5,888
  • 11
  • 47
  • 85
user3883507
  • 69
  • 1
  • 8

5 Answers5

3

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.

Community
  • 1
  • 1
webkit
  • 3,349
  • 1
  • 16
  • 18
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

Community
  • 1
  • 1
karan3112
  • 1,867
  • 14
  • 20
0

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

Leo
  • 14,625
  • 2
  • 37
  • 55
0

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

});
PraJen
  • 606
  • 3
  • 11
  • Yes, but when a user scroll the anchors change one by one and based on the background. so if Nav list 5's color is white and the background is black, the rest of the of links are black. if the black background reach 4th list (from above), the font color of nav list 5 and 4 is white and 1,2 3 are still black – user3883507 Jul 28 '14 at 09:14
  • Do u want it using scroll event?? – PraJen Jul 28 '14 at 09:21
  • Yes Sir, I already done that. except the right code to know if each anchor is below new div – user3883507 Jul 28 '14 at 09:28
0

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/

Niffler
  • 1,645
  • 11
  • 11