## jQuery實現“成都小風車官網”特效 >效果如圖  >導航部分html代碼（bootstrap框架） ``` <div id="nav"> <div class="container"> <nav class="navbar navbar-default" role="navigation" id="navbar"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" id="btn"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" id="logo"></a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse" id="nav-right"> <ul class="nav navbar-nav navbar-right" id="mx-navigation"> <li class="select" id="n_home"><a href="javascript:void(0)"><i class="glyphicon glyphicon-home"></i>&nbsp;網站首頁</a></li> <li id="n_service"><a href="javascript:void(0)">服務與支持</a></li> <li id="n_show"><a href="javascript:void(0)">產品展示</a></li> <li id="n_customer"><a href="javascript:void(0)">客戶</a></li> <li id="n_aboutus"><a href="javascript:void(0)">關于我們</a></li> <li class="code"> <a id="code"><img src="images/logo_msg.png" alt=""></a> <i id="code_img"><img src="images/code.png" alt=""></i> </li> </ul> </div> </nav> </div> </div> ``` >部分與jQuery有關的css代碼 ``` .fixed { position: fixed; top: 0; border-bottom: 1px solid #ccc; } .select { background-color: #4695dd; color: #fff !important; } .select a { color: inherit !important; } ``` >jQuery代碼 ``` $(function(){ /*-----------獲取四個點擊跳轉的滾動距離---------*/ var service = $("#service").offset().top; var show = $("#show").offset().top; var customer = $("#customer").offset().top; var aboutus = $("#aboutus").offset().top; /*---------------------導航滑動事件------------------*/ $(window).scroll(function(){ var scroll = $(window).scrollTop(); console.log(scroll); console.log(show); if(scroll>0){ $("#nav").addClass("fixed"); } if(scroll<service-150) { $("#n_home").addClass("select").siblings().removeClass("select"); } if(scroll>=service-151) { $("#n_service").addClass("select").siblings().removeClass("select"); } if(scroll>show-101) { $("#n_show").addClass("select").siblings().removeClass("select"); } if(scroll>customer-101) { $("#n_customer").addClass("select").siblings().removeClass("select"); } if(scroll>aboutus-101) { $("#n_aboutus").addClass("select").siblings().removeClass("select"); } }) /*--------------------導航點擊事件----------------*/ $(function(){ $("#n_home").click(function(){ $("html, body").animate({scrollTop: 0}, 500); }) $("#n_service").click(function(){ $("html, body").animate({scrollTop: service-150}, 500); }) $("#n_show").click(function(){ $("html, body").animate({scrollTop: show-100}, 500); console.log(scroll); }) $("#n_customer").click(function(){ $("html, body").animate({scrollTop: customer-100}, 500); }) $("#n_aboutus").click(function(){ $("html, body").animate({scrollTop: aboutus-100}, 500); }) /*----------二維碼顯示隱藏-----------*/ $("#code").click(function(event){ $("#code_img").toggle(); event.stopPropagation(); }) $("body").click(function(){ $("#code_img").hide(); }) }) }) ``` 整個項目以上傳至[碼云](https://gitee.com/MrXuxu/HomeWork/tree/master/%E6%88%90%E9%83%BD%E5%B0%8F%E9%A3%8E%E8%BD%A6)