javascript - 滚动到元素时创建导航淡入不同的颜色

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;
}