jQuery实现导航条楼层跳转功能

nav导航的html结构

        <!-- 导航 -->
        <!-- .part -->
　　　　 在需要跳转的楼层上添加part类名就行了

        <div class="line"></div>
        <div class="nav">
            <div class="swiper-container">
                <div class="swiper-wrapper wrapper">
                    <div class="swiper-slide list on">领券下单</div>
                    <div class="swiper-slide list">抽奖赢礼</div>
                    <div class="swiper-slide list">精选囤货</div>
                    <div class="swiper-slide list">半价专区</div>
                    <div class="swiper-slide list">爆款推荐</div>
                    <div class="swiper-slide list">大牌推荐</div>
                    <div class="swiper-slide list">更多福利</div>
                    <div class="swiper-slide list" id="last">特惠专区</div>
                </div>

                <div class="swiper-pagination"></div>
                <div class="direction"></div>
                <div class="direction direction-prev"></div>
                <div class="direction direction-next"></div>
            </div>
        </div>

 

nav导航的css样式

/*导航 start*/
.line {
  background-color: #fff;
}
.line.move {
  height: 0.8rem;
}
.nav {
  margin: 0 auto;
  height: 0.8rem;
  width: 100%;
  line-height: 0.8rem;
  text-align: center;
  background-color: #ffffff;
  z-index: 999;
  position: relative;
  color: #3c0486;
  font-size: 0.28rem;
  max-width: 7.5rem;
}
.nav.move {
  position: fixed;
  top: 0;
}
.nav.box {
  height: 3rem;
  border-top: 0.03rem solid #8fc1e8;
  width: 0.5rem;
}
.nav .swiper-container {
  height: 0.8rem;
}
.nav .swiper-slide {
  text-align: center;
  width: auto;
  color: #666666;
  white-space: nowrap;
  padding: 0 0.3rem;
}
.nav .swiper-slide.on {
  color: #fe8716;
}
/*导航 end*/

 

引入的JS代码

var navSwiper = new Swiper(\'.nav .swiper-container\', {
    slidesPerView: \'auto\',
    paginationClickable: true,
    pagination : \'.nav .swiper-pagination\',
    paginationHide :false,
    nextButton:\'.nav .direction-next\',
    prevButton:\'.nav .direction-prev\'
});

// 双旦狂欢
// var bashSwiper = new Swiper(\'.bash-list .swiper-container\', {
//     slidesPerView: \'auto\',//一行显示3个
//     slidesPerColumn: 3,//显示2行
//     spaceBetween :5,
// });
window.onload = function(){
    setTimeout(function() {
        loading();
    }, 600);
}

function loading(){
    var nowCur = $(\'.nav .swiper-wrapper div.on\').index();
    // console.log(nowCur);
    if (nowCur>3) {
        $(\'.swiper-pagination .swiper-pagination-bullet\').eq(nowCur-1).click();
    }
}


$(window).on( \'scroll\' , function(){
    var nowTop = $(window).scrollTop();
    var a = 0;
    $(\'.part\').each(function(){
        var nowIndex = $(\'.part\').index(this);
        var boxTop = $(this).offset().top;
        if( boxTop <= nowTop + $(\'.nav\').height()+10 ){
            a = nowIndex;
        }
    })
    var woca = $(\'.nav .swiper-wrapper div.on\').index();
    
    $(\'.swiper-pagination span\').eq(a).click();
    $(\'.nav .swiper-wrapper div\').removeClass(\'on\').eq(a).addClass(\'on\');

    // 瀵艰埅楂樺害
    var lineTop = $(\'.line\').offset().top;
    if( nowTop >= lineTop ){
        $(\'.nav,.line\').addClass(\'move\');
    } else {
        $(\'.nav,.line\').removeClass(\'move\');
    }
})
$(\'.direction\').bind(\'click\',function(){
    if( $(this).hasClass(\'swiper-button-disabled\') && $(this).hasClass(\'direction-next\') ){
        // $(\'.direction-prev\').fadeIn(600);
        // $(\'.direction-next\').fadeOut(600);
    } else if ( $(this).hasClass(\'swiper-button-disabled\') && $(this).hasClass(\'direction-prev\')  ) {
        // $(\'.direction-next\').fadeIn(600);
        // $(\'.direction-prev\').fadeOut(600);
    }
})
$(\'.nav .swiper-slide\').click(function(){
    var nowIndex = $(this).index();
    $(\'body,html\').animate({\'scrollTop\':$(\'.part\').eq(nowIndex).offset().top - $(\'.nav\').height() })
})

 

实现的效果：