博路網絡在給宜興企業(yè)客戶的網站設計時，有時導航需要做成全屏大圖片上，當鼠標向下滾動的時候，導航會由當前狀態(tài)，切換成出現(xiàn)導航白背景+字體顏色為黑色的導航條，這樣更方便瀏覽者快速點擊導航，找到自己需要的內容。以下是博路網絡給客戶添加的一些代碼，先看下效果圖：
當網站打開時的當前導航狀態(tài)：
當鼠標向下滾動時導航的狀態(tài)：
當鼠標向上滾動恢復時導航狀態(tài)：
前端代碼：
<div id="bannertop">
<div id="bannersy">
<div class="logo"><a href="index.asp" title="客戶網站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%>>網站首頁</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%>>產品介紹</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>工程業(yè)績</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}
以上紅色標注代碼為主要代碼，根據自己需求，可以進行不同的修改設置，達到自己想要的效果，這個導航小技巧的運用，在網站寬屏大圖切換中非常實用，在我們許多網站設計中也經?？吹竭@樣的效果。