jQuery detect background color of a fixed element

Question

I have a white menu button that has a fixed position. I have a section on my website that has a white background color. My goals is that when the menu button scrolls over the white section it turns black instead of white.

I just have no idea how I can detect the background color of my fixed element? Is this even possible?

here's what my jQuery looks like:

$color = how to detect bg color?;

if ($color == "#fff"){
    $("nav-icon2").css("color", "#000");
}else{
    $("nav-icon2").css("color", "#fff");
}

Possible duplicate of [How to set background color in jquery](http://stackoverflow.com/questions/4780670/how-to-set-background-color-in-jquery) — geeksal, Mar 30 '16 at 15:07

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

Here's a working fiddle based on this solution : How to get the background color code of an element?

See this fiddle

var color = '';
var x = $(".nav-icon2").css('backgroundColor');
hexc(x);
alert(color);

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

EDIT :

If I understand correctly your issue, you wants this :

See this updated fiddle

$(window).scroll(function(){
    if($(window).scrollTop() > 350){
    $("h2").css('color','#f00');
  }else{
        $("h2").css('color','#fff');
  }
});

edited May 23 '17 at 12:07

Community

1
1

answered Mar 30 '16 at 15:08

Vincent G

8,547
1
18
36

For some reason I get 'Uncaught TypeError: Cannot read property 'match' of undefined' in my console – Frank Lucas Mar 30 '16 at 15:11
This is the correct answer related to the OP's question, because the user **is comparing the value to #fff**, hence the regex is necessary. +1 (also, a further edit should be that the user needs to compare it to #ffffff instead in this case) – briosheje Mar 30 '16 at 15:13
@VincentG Can I do the same thing in jQuery? – Frank Lucas Mar 30 '16 at 15:15
@FrankLucas: did you copy the function first? – briosheje Mar 30 '16 at 15:16
@briosheje Yes I did – Frank Lucas Mar 30 '16 at 15:17
I get this error "Uncaught TypeError: Cannot convert undefined or null to object" complaining about the first line of the function – Frank Lucas Mar 30 '16 at 15:19
but this answer is javascript not jquery? – Frank Lucas Mar 30 '16 at 15:19
Please show your code in another JSFiddle so we can help you with more efficiency. jQuery is a javascript library so jQuery IS javascript ;) However the hexc function is made with javacript not jquery functions – Vincent G Mar 30 '16 at 15:20
jQuery **is** a javascript library. are you passing the correct parameter to the hexc function? just copy what Vincent did, it must work. – briosheje Mar 30 '16 at 15:21
how about give a background-color value on your #nav-icon2 ? ;) – Vincent G Mar 30 '16 at 15:23
@VincentG It doesn't have a bg color and is not supposed to have one :( – Frank Lucas Mar 30 '16 at 15:24
My goals is to detect the bg color of the element it scrolls over – Frank Lucas Mar 30 '16 at 15:24
Meh, anyway, if you don't like the function, here is a jquery plugin using Vincent's function: https://jsfiddle.net/s8jvgctn/2/ . – briosheje Mar 30 '16 at 15:25
I don't think you guys understand. My element doesn't have a bg color. It's fixed and scrolls over all my other content. And I want the section where it scrolls over a white color it turns black – Frank Lucas Mar 30 '16 at 15:26
http://aerolab.github.io/midnight.js/ an example what I am trying to create with my menu button – Frank Lucas Mar 30 '16 at 15:27

score 0 · Answer 2 · answered Mar 30 '16 at 15:04

0

Simple!

var $color = $('nav-icon2').css('background-color');

answered Mar 30 '16 at 15:04

jonny

3,022
1
17
30

score 0 · Answer 3 · answered Mar 30 '16 at 15:04

0

You can do this with:

$color = $( "your-element" ).css( "backgroundColor" );

answered Mar 30 '16 at 15:04

Michael

161
1
1
7

jQuery detect background color of a fixed element

3 Answers3