需求描述：
实现导航滚动过banner之后吸顶，点击导航后定位到对应模块，滚动到对应模块后导航对应区域实现高亮效果~~~
html+css+jsswiper+jq
使用html+swiper实现页面布局
<div class="nav_wrap"><div class=" nav nav_box2 clearfix swiper-container "><div class="swiper-wrapper"><a href="javascript:;" type="cj" class="swiper-slide fl">初级专场</a><a href="javascript:;" type="zk" class="swiper-slide fl on">注会专场</a></div><a href="javascript:;" class="prev"><img src="./images/left1.png" alt=""></a><a href="javascript:;" class="next"><img src="./images/right1.png" alt=""></a></div></div>
页面下半部分写出各个板块，class类以a标签的type属性命名。如下：
<div class="cj hide clearfix"></div><div class="zk on clearfix"></div>
css部分
具体的样式自己写哈~~~~
.hide{display:none;}.on{font-size:18px;color:#c00d0b;width:189px!important;height:70px;background:url(../images/on.png) no-repeat center !important;background-size:100%;}/*导航选中高亮的样式*/
js部分
分析：
点击导航定位到对应模块点击导航高亮滚动大于banner时吸顶滚动到对应模块时导航栏对应高亮
var mySwiper=new Swiper(' .nav_box2', {slidesPerView: 'auto',spaceBetween: 25,observer: true,observeParents: true,navigation: {nextEl: '.next',prevEl: '.prev',}})var _body = $("body");// 顶部导航栏切换定位_body.on({"click": function () {var t = $(this),type = t.attr('type'),navh = $('.nav').outerHeight();$('html,body').animate({scrollTop: $("." + type).offset().top - navh - 50}, 10, function () {t.addClass('on').siblings().removeClass('on');if(index>0){mySwiper.slideTo(index,0,false);}})}}, '.nav_box2 a')function loadStatic() {// 导航滚动切换var winh = document.documentElement.clientHeight,navh = $('.nav').outerHeight(),scrollh = $('.nav').position().top;tool.scroll(function (f) {// 随屏$('.floors').toggle(f >= scrollh)// 滚动定位$('.floor').each(function (index, item) {if (f > $(item).offset().top - navh - 60) {$('.nav_box2 a').eq(index).addClass('on').siblings().removeClass('on')}})})}loadStatic();
由于我的slide的数量比较多，但是都需要放到一行，所以就借助了swiper这一工具的拉扯作用实现点击的时候就向前一步的功能。
如果小伙伴没有很多导航块的话可以忽略这个~~~
