博路網(wǎng)絡(luò)在給宜興企業(yè)客戶的網(wǎng)站設(shè)計(jì)時(shí)，有時(shí)導(dǎo)航需要做成全屏大圖片上，當(dāng)鼠標(biāo)向下滾動(dòng)的時(shí)候，導(dǎo)航會(huì)由當(dāng)前狀態(tài)，切換成出現(xiàn)導(dǎo)航白背景+字體顏色為黑色的導(dǎo)航條，這樣更方便瀏覽者快速點(diǎn)擊導(dǎo)航，找到自己需要的內(nèi)容。以下是博路網(wǎng)絡(luò)給客戶添加的一些代碼，先看下效果圖：
當(dāng)網(wǎng)站打開時(shí)的當(dāng)前導(dǎo)航狀態(tài)：
當(dāng)鼠標(biāo)向下滾動(dòng)時(shí)導(dǎo)航的狀態(tài)：
當(dāng)鼠標(biāo)向上滾動(dòng)恢復(fù)時(shí)導(dǎo)航狀態(tài)：
前端代碼：
<div id="bannertop">
<div id="bannersy">
<div class="logo"><a href="index.asp" title="客戶網(wǎng)站logo"></a></div>
<div id="menu">
<ul id="nav">
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>網(wǎng)站首頁(yè)</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>關(guān)于我們 </a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>產(chǎn)品介紹</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>工程業(yè)績(jī)</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>新聞資訊</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>聯(lián)系我們</a></li>
</ul>
</div>
</div>
</div>
js代碼：
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 100) {
$("#bannertop").css("background" , "white");
$("#bannertop ul li a").css("color" , "#000");
$("#bannertop").css("box-shadow" , "0px 0px 10px 2px rgba(0,0,0,0.2)");
}
else{
$("#bannertop").css("background" , "rgba(255, 255, 255, 0)");
$("#bannertop ul li a").css("color" , "#fff");
$("#bannertop").css("box-shadow" , "0px 0px 10px 2px rgba(0,0,0,0)");
}
})
})
</script>
css代碼：
#bannertop{ width:100%; height:103px;display:block; margin:0 auto;z-index:999999; position: fixed;top:0; }
#menu .mainlevelnewsx{ float:left;width:110px; /*IE6 only*/}
#menu .mainlevelnewsx a {width:110px; height:49px;margin:0; color:#fff; padding:0; line-height:49px;font-size:16px;font-family: "微軟雅黑","Microsoft Yahei"; display:block;}
#menu .mainlevelnewsx a:hover {width:112px;color:#fff; border-bottom:3px solid #2E7FD0;height:49px;line-height:49px;text-decoration:none; }
#menu .mainlevelnewsx ul {display:none; position:absolute; float:left; padding:0;margin-left:0; width:200px;line-height:80px; border-top:1px solid #F78213; border-bottom:3px solid #F78213;color:#333;filter:alpha(opacity=90);-moz-opacity:1;opacity: 1; background: #FFF}
#menu .mainlevelnewsx li {width:110px; height:24px; margin:3px auto;background:url(../images/submenubg.jpg); line-height:24px; font-size:13px;font-family: "微軟雅黑", "Microsoft Yahei"; color:#000;/*IE6 only*/}
#menu .mainlevelnewsx li a{text-decoration:none; line-height:24px; display:block; width:110px;text-align:left; padding-left:30px;font-size:13px;font-family: "微軟雅黑", "Microsoft Yahei";color:#000;}
#menu .mainlevelnewsx li a:hover{color:#000; text-decoration:none;width:196px; padding-left:30px;height:24px;line-height:24px; background:url(../images/submenubg_hover.jpg);}
#nav .mainlevelnewsx a.y{ width:112px; text-decoration:none;color:#FFF; border-bottom:3px solid #2E7FD0}
以上紅色標(biāo)注代碼為主要代碼，根據(jù)自己需求，可以進(jìn)行不同的修改設(shè)置，達(dá)到自己想要的效果，這個(gè)導(dǎo)航小技巧的運(yùn)用，在網(wǎng)站寬屏大圖切換中非常實(shí)用，在我們?cè)S多網(wǎng)站設(shè)計(jì)中也經(jīng)常看到這樣的效果。