## 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)