更改汉堡菜单的颜色，使其与下面的背景颜色不同
[英]Changing color of burger menu so that it is not the same at the background color underneath it
问题描述
I am building a one page website that will have a fixed burger icon for opening the menu. 
我正在建立一个单页网站，该网站将具有用于打开菜单的固定汉堡图标。 The burger icon has a color the same as certain background colors of some of the pages. 汉堡图标的颜色与某些页面的某些背景颜色相同。 Thus when the burger icon is on these pages it will not be visible. 因此，当这些页面上的汉堡图标不可见时。 I am looking for a way to be able to change the color of the burger icon when it is on the pages that have the same color. 我正在寻找一种方法，可以在具有相同颜色的页面上更改汉堡图标的颜色。
Let's say the burger icon is normally blue, and the div underneath it is white, here the burger icon remains blue. 假设汉堡图标通常为蓝色，而其下面的div为白色，此处的汉堡图标仍为蓝色。 but if the next div is blue when the burger icon reaches this div it changes its color to white. 但是，当汉堡图标到达该div时，如果下一个div为蓝色，则它将颜色更改为白色。
My burger icon is an empty div with the below css to make it look like a burger icon. 我的汉堡图标是一个空div，下面的CSS使其看起来像一个汉堡图标。 The burger icon is wrapped in an other div with a fixed position. 汉堡图标以固定位置包裹在另一个div中。
//HTML Code
<section class="buttonset">
<div id="nav_list"></div>
</section>
//CSS Code
.buttonset
{
height: 50px;
position: fixed;
top: 53px;
left: 55px;
z-index: 1;
}
#nav_list
{
cursor: pointer;
height: 30px;
width: 41px;
}
#nav_list:before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 0.17em;
background: #71ADBE;
box-shadow: 0 6px 0 0 #71ADBE, 0 12px 0 0 #71ADBE;
border-radius: 2px;
}
What I want is to change the background color of the burger icon to a different color when the background color of the div underneath the it is the same as the background color of the burger icon. 我想要的是当其下面的div的背景颜色与汉堡图标的背景颜色相同时，将汉堡图标的背景颜色更改为其他颜色。
ie if(burger icon = blue & homePage = blue){ burger icon background color change to white; 即if（汉堡图标=蓝色＆主页=蓝色）{汉堡图标背景颜色更改为白色； } }
In order to achieve this, I think that the code has to be running continuously check what the background color of the pages are so that it will be able to change the color of the burger icon. 为了实现这一点，我认为代码必须连续运行以检查页面的背景颜色是什么，以便能够更改汉堡图标的颜色。
Is there any way this can be done? 有什么办法可以做到吗？ Maybe detecting what background color the page has using javascript or jquery and then changing the color of the burger icon? 也许使用javascript或jquery检测页面具有什么背景颜色，然后更改汉堡图标的颜色？
Thanks 谢谢
5 个解决方案
解决方案1
0 2016-05-04 16:49:43
Disclaimer: This is just General Code and will be updated when the question gets some Detail. 免责声明：这只是一般代码，当问题变得更详细时将进行更新。
var bgcol = $(this).css('background-color');
We save the bgcolor of the background. 我们保存背景的bgcolor。 in the example the background is selected as this. 在示例中，背景被选中。
$(this).css('background-color', bgcol);
Append the background to your burger in this example Burger is selected as this. 在此示例中，将背景附加到您的汉堡包中。
解决方案2
0 已采纳 2016-05-04 16:54:11
EDIT Based off update HTML and CSS I created another fiddle https://jsfiddle.net/snpsp6as/4/ 编辑基于更新的HTML和CSS，我创建了另一个小提琴https://jsfiddle.net/snpsp6as/4/
This is checking to see if body color matches burger color and if so changes burger button to white. 这是在检查主体颜色是否与汉堡颜色匹配，如果匹配，则将汉堡按钮更改为白色。
var element = document.getElementsByTagName("BODY")[0];
var style = window.getComputedStyle(element, "");
var bgColor = style.getPropertyValue("background-color");
var color = window.getComputedStyle(document.querySelector('#nav_list'), ':before').getPropertyValue('background-color');
if (bgColor == color) {
document.styleSheets[0].addRule('#nav_list:before', 'background: white !important; box-shadow: 0 6px 0 0 white, 0 12px 0 0 white !important;');
}
Yes, see fiddle https://jsfiddle.net/snpsp6as/ 是的，请参见小提琴https://jsfiddle.net/snpsp6as/
This is looking for the background color blue and its if blue it will change the text to white 这正在寻找蓝色的背景色，如果它是蓝色 ，它将文本更改为白色
<div id="div1">
<h1 id="myH1">Blue</h1>
</div>
<script>
var element = document.getElementById("div1");
var style = window.getComputedStyle(element, "");
var bgColor = style.getPropertyValue("background-color");
alert("The background color is: " + bgColor);
if (bgColor === "rgb(0, 0, 255)") {
document.getElementById("myH1").style.color = "white";
}
</script>
解决方案3
0 2016-05-04 16:56:56
I would use the analysis of the color component that you want. 我将使用所需颜色组件的分析。 Here's an example of the red color (if you had a red and a blue icon): 这是红色的示例（如果您有红色和蓝色图标）：
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<body style="background-color: #F00">
<P id=value></P>
<script>
var color = $('body').css("background-color");
var red = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)[1];
//if red is too intense, we might want to avoid using the red icon
// (although it would be fine on a white background)
if (red > 100) {
$('#value').html("too red - choose a blue icon");
} else {
$('#value').html("not too red - chose a red icon");
}
</script>
</body>
</html>
解决方案4
-1 2016-05-04 16:47:22
Programatically - no. 以编程方式-不。 At least not in such a fashion that will universally work across browsers and platforms. 至少不能以这种方式在所有浏览器和平台上都能通用。 The most reasonable approach (and the one used by countless corporate websites) is to have two versions of the image, and call them accordingly using (probably) javascript with a simple if statement that checks the blue values of the background. 最合理的方法（以及无数公司网站使用的一种方法）是拥有图像的两个版本，并相应地使用（可能是）javascript和一个简单的if语句来检查背景的蓝色值，从而对其进行调用。
If the background is an image, that gets a bit trickier, and may require manual intervention per page. 如果背景是图像，则将变得有些棘手，并且可能需要每页手动干预。
解决方案5
-1 2016-05-04 16:51:15
Using what I could assume from the question, you are looking for a solution that automatically changes the background color based on whether the burger icon is there (lets go with visible). 使用我可以从问题中得出的假设，您正在寻找一种解决方案，该解决方案将根据汉堡图标是否存在来自动更改背景颜色（让其可见）。
if ($(".logo").css('display') == 'none') {
$("html").css("background-color", "yellow", "!important");
}
Theoretically, this should work if the logo is set specifically to none . 从理论上讲，如果徽标专门设置为none ，则此方法应该起作用。
Otherwise, there is additional Javascript to identify if the logo is present and change it to none and if that is what you are looking for you will need to edit your question. 否则，还有其他Javascript可以识别徽标是否存在并将其更改为无，如果您正在寻找徽标，则需要编辑问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.