創建導航時滾動到元素時會淡入不同的顏色

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