tab吸頂處理

   ================== HTML ==================
   <div class="fake-nav"></div>
   <div id="navListPromotion" class="nav-wrap clearfix">
        <a class="nav-item fl active"  href="javascript:void(0);" ><span>全部</span></a>
        <a class="nav-item fl"  href="javascript:void(0);" ><span>上衣</span></a>
        <a class="nav-item fl"  href="javascript:void(0);" ><span>褲子</span></a>
   </div>
    
  ================== Less ==================
.MOD_TAB_FIX {
    position: fixed;
    z-index: 44;
    top: 0;
    left: 0;
}
.fake-nav {
    width: 100%;
    height: 0;
}
.nav-wrap {
    overflow: hidden;
    font-size: 0.32rem;
    width: 100%;
    .nav-item {
        display: inline-block;
        text-align: center;
        height: 0.8rem;
        line-height: 0.8rem;
        overflow: hidden;
        span{
            // width: 100%;
            display: block;
            // height: 100%;
            white-space: nowrap;
            position: relative;
            padding: 0 0.08rem;

        }
    }
    .active span{
        &::after{
            content: '';
            height: 0;
            width: .5rem;
            left: 50%; bottom: 0;
            position: absolute;
            margin-left: -0.25rem;
        }
    }
}


 ================== JS ==================
    /*處理tab滾動吸頂問題*/
    var container = $('.Wap')
    var navWrap = container.find(".nav-wrap") 
    var originalTop = navWrap.offset().top
    function tabScollFix(){
        var outerWrap =  $(window)
        var allWidth = $(window).width()
        var moduleWrap = outerWrap.width()
        var wrapWidth = navWrap.width()
        var navHeight = navWrap.height()
        var fakeWrap = container.find(".fake-nav")
        var timeoutKey = 0;
        outerWrap.on('scroll', function() {
            var _scrollTop = outerWrap.scrollTop();
            var newOriginalTop = window._updateNavHeight()
            if(newOriginalTop < originalTop){
                newOriginalTop = originalTop
            } 
            cancelAnimationFrame(timeoutKey);
            timeoutKey = requestAnimationFrame(function() {
                if (_scrollTop > newOriginalTop && !navWrap.hasClass('MOD_TAB_FIX')) {
                    navWrap.addClass('MOD_TAB_FIX');
                    navWrap.css({
                        left: (allWidth - moduleWrap) + 'px',
                        width: wrapWidth + 'px'
                    });
                    fakeWrap.height(navHeight);
                } else if (_scrollTop < newOriginalTop && navWrap.hasClass('MOD_TAB_FIX')) {
                    navWrap.removeClass( 'MOD_TAB_FIX');
                    navWrap.css({
                        left: 0 + 'px',
                        width: '100%'
                    });
                    fakeWrap.height(0);
                }
            });
        });
    }

    window._updateNavHeight = function() {
        // originalTop = container.find('.nav-wrap').offset().top;
        return  container.find('.nav-wrap').offset().top;
    };