根据背景更改导航字体颜色 [英] Change navigation font color based on background
本文介绍了根据背景更改导航字体颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
html
< div class =content>
< div id =left_side>
< div id =static_menuclass =>
< div id =main_navigationclass =>
< ul class =menu mainLeftid =mymenu>
< li>< a href =＃section1>导航列表1< / a>< / li>
< li>< a href =＃section2>导航列表2< / a>< / li>
< li>< a href =＃section3>导航列表3< / a>< / li>
< li>< a href =＃section4>导航清单4< / a>< / li>
< li>< a href =＃section5>导航列表5< / a>< / li>
< / ul>
< / div>
< / div>
< / div>
< div id =wrapper>
< div class =sectionid =section1> section1< / div>
< div class =sectionid =section2> section2< / div>
< div class =sectionid =section3> section3< / div>
< div class =sectionid =section4> section4< / div>
< div class =sectionid =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;
}
。部分
{
宽度：100％;
text-align：center;
padding：150px 0;
border：1px solid＃666;
}
＃section1
{
background：#fff;
}
＃section2
{
background：＃000;
颜色：#fff;
}
＃section3
{
background：#fff;
}
＃section4
{
background：＃000;
颜色：#fff;
}
＃section5
{
background：#fff;
}
解决方案
：
var _li，_sections;
$ b $（函数（）{
_li = $（＃mymenu）。find（li）;
_sections = $（＃wrapper）。find （.section）;
$（window）.on（'scroll'，liBgs）;
}）;
函数liBgs（）{
for（var i = 0; i< _li.length; i ++）{
var _litop = _li.eq（i ）.offset（）顶部。
for（var j = 0; j <_sections.length; j ++）{
var $ s = _sections.eq（j），
_sectop = $ s.offset（）。 ，
_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）;
函数rgb2hex（rgb）{
rgb = rgb.match（/ ^ rgb\（ （\d +），\s *（\d +），\s *（\d +）\）$ /）;
函数hex（x）{
return（0+ parseInt（x）.toString（16））。slice（-2）;
}
return＃+ hex（rgb [1]）+ hex（rgb [2]）+ hex（rgb [3]）;
注意：rgb2hex（）函数来自这个问题：如何获得十六进制颜色值而不是RGB值？
这段代码的作用：
我基本上将菜单li的位置与段落进行比较，每次滚动的时候，每个b $ b的部分都结束了。我不确定这是非常有效的，但对于小规模的项目来说没关系。如果有人知道如何让这个效率更高，我会很乐意学习。
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;
}
解决方案 To do what you asked for you can do this with jquery:
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.
这篇关于根据背景更改导航字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
