CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user3883507
user3883507

Reputation: 79

Change navigation font color based on background

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

Upvotes: 2

Views: 6558

Answers (5)

PraJen
PraJen

Reputation: 606

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

});

Upvotes: 0

Niffler
Niffler

Reputation: 1710

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/

Upvotes: 0

karan3112
karan3112

Reputation: 1867

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

Upvotes: 3

webkit
webkit

Reputation: 3369

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.

Upvotes: 3

Leo
Leo

Reputation: 14830

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

Upvotes: 0

Related Questions