博路网络在给宜兴企业客户的网站设计时，有时导航需要做成全屏大图片上，当鼠标向下滚动的时候，导航会由当前状态，切换成出现导航白背景+字体颜色为黑色的导航条，这样更方便浏览者快速点击导航，找到自己需要的内容。以下是博路网络给客户添加的一些代码，先看下效果图：

当网站打开时的当前导航状态：

当鼠标向下滚动时导航的状态：

当鼠标向上滚动恢复时导航状态：

前端代码：

<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%>>工程业绩</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>

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

以上红色标注代码为主要代码，根据自己需求，可以进行不同的修改设置，达到自己想要的效果，这个导航小技巧的运用，在网站宽屏大图切换中非常实用，在我们许多网站设计中也经常看到这样的效果。