导航栏吸顶 vs 滚动定位

需求描述：

实现导航滚动过banner之后吸顶，点击导航后定位到对应模块，滚动到对应模块后导航对应区域实现高亮效果~~~

• html+css+js
• swiper+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这一工具的拉扯作用实现点击的时候就向前一步的功能。
如果小伙伴没有很多导航块的话可以忽略这个~~~