Question

我有一个固定位置的白色菜单按钮。我的网站上有一个部分有白色背景颜色。我的目标是，当菜单按钮滚动到白色部分时，它会变成黑色而不是白色。

我只是不知道如何检测固定元素的背景颜色？这甚至可能吗？

这是我的jQuery的样子：

$color = how to detect bg color?;

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

Answer 1

这是基于此解决方案的工作小提琴： 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('');
}

编辑：

如果我理解你的问题，你想要这个：

See this updated fiddle

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

Answer 2

简单！

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

Answer 3

你可以这样做：

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

jQuery检测固定元素的背景颜色

3 个答案: