滚动到元素时，创建导航会淡化为不同的颜色

Question

我正在创建一个带有固定导航的单页网站。有4个不同的部分。当用户点击导航中的链接时，我想淡化导航的颜色以匹配它所采用的部分的主题。这样做最好的方法是什么？我尝试了许多不同的东西，但似乎没有什么能达到我想要的目的。 -提前致谢！

Answer 1

所以你需要做一些事情来实现这个目标。

• 导航图层位于其他图层上方
• 为每个具有静态背景颜色的部分堆叠背景图层
• 当前颜色和新颜色的知识

你要做的就是让每个部分都跟踪它的颜色。选择该部分的导航后，导航后面的当前图层开始淡出。与此同时，新部分的层开始淡入。这会让人觉得一种颜色会逐渐消失。

---

修改的

的 jsFiddle Demo 的

这是一个非常基本的例子。应该有更多的结构，更好的样式，并且可能在代码中更多地管理状态。但是，单击链接将显示颜色渐变。

• JS​​

$("#redSection,#redPane").show();
$("#navLinks div").click(function(){
 $(".pane:visible,.section:visible").fadeOut("slow");
 var color = this.getAttribute("data-color");
 $("#"+color+"Section,#"+color+"Pane").stop().fadeIn("slow");
});

• html

<div id="layers">
 <div id="navLinks">
  <div data-color="red">about</div>
  <div data-color="green">contact</div>
  <div data-color="blue">overview</div>
  <div data-color="orange">links</div>
 </div>
 <div id="redPane" class="pane"></div>
 <div id="greenPane" class="pane"></div>
 <div id="bluePane" class="pane"></div>
 <div id="orangePane" class="pane"></div>
</div>
<hr />
<div id="contentArea">
 <div id="redSection" class="section">about</div>
 <div id="greenSection" class="section">contact</div>
 <div id="blueSection" class="section">overview</div>
 <div id="orangeSection" class="section">links</div>
</div> 

• CSS

<子>

#layers{
 position:relative;
}
#navLinks div{
 font-weight:bold;
 font-size:110%;
 text-decoration:underline;
 cursor:pointer;
 position:relative;
 z-index:1;
}
.section{
 display:none;
 height:100px;
 width:100px;
 position:absolute;
}
#redSection{
 background-color:red;
}
#greenSection{
 background-color:green;
}
#blueSection{
 background-color:blue;
}
#orangeSection{
 background-color:orange;
}
.pane{
 position:absolute;
 right:0;
 left:0;
 top:0;
 bottom:0;
 display:none;
}
#redPane{
 background-color:red;
}
#greenPane{
 background-color:green;
}
#bluePane{
 background-color:blue;
}
#orangePane{
 background-color:orange;
}
#contentArea{
 position:relative;
}