tab吸顶

tab吸顶处理

   ================== HTML ==================
   
================== 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; };

你可能感兴趣的:(tab吸顶)