上滾動隱藏資產淨值降下來，不是與barba.js頁面過渡

我使用的是流行的scroll detection method向下隱藏滾動一個nav元素，並顯示在滾動起來工作。

$(window).scroll(function(){ 

    currentScrollTop = $(window).scrollTop(); 

    if (currentScrollTop > lastScrollTop) { 
     // On scroll down 
     $('nav').removeClass('active'); 
     console.log('Down'); 
    } else { 
     // On scroll up 
     $('nav').addClass('active'); 
     console.log('Up'); 
    } 

    lastScrollTop = currentScrollTop; 
    logScroll(); 

});

Barba.js轉換我還使用barba.js與頁面過渡，所有做工精細

。每次我打開了新的一頁我運行一個過渡，我也跑了幾個我自己的自定義功能，這對沒有任何影響的，從滾動分開：

$(window).scrollTop(0)

我用滾動備份到頂部該文件。它可以跨瀏覽器工作。

var FadeTransition = Barba.BaseTransition.extend({ 
    start: function() { 

    // This function is automatically called as soon the Transition starts 
    // this.newContainerLoading is a Promise for the loading of the new container 
    // (Barba.js also comes with an handy Promise polyfill!) 
    // As soon the loading is finished and the old page is faded out, let's fade the new page 

    Promise 
     .all([this.newContainerLoading, this.fadeOut()]) 
     .then(this.fadeIn.bind(this)); 
    }, 

    fadeOut: function() { 

    // this.oldContainer is the HTMLElement of the old Container 
    return $(this.oldContainer).animate({ opacity: 0 }).promise(); 
    }, 

    fadeIn: function() { 

    // this.newContainer is the HTMLElement of the new Container 
    // At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden) 
    // Please note, newContainer is available just after newContainerLoading is resolved! 

    // Custom — Add scrollTop 
    $(window).scrollTop(0); 
    resetScrollTop(); 

    // Custom - History ScrollTop 
    if ('scrollRestoration' in history) { 
     history.scrollRestoration = 'manual'; 
    } 

    var _this = this; 
    var $el = $(this.newContainer); 

    $(this.oldContainer).hide(); 

    $el.css({ 
     visibility : 'visible', 
     opacity : 0 
    }); 

    $el.animate({ opacity: 1 }, 400, function() { 

    // Do not forget to call .done() as soon your transition is finished! 
    // .done() will automatically remove from the DOM the old Container 

     _this.done(); 

    }); 
    } 
});

重置卷軸

我還補充說，我在同一時間運行，試圖重置所有滾動的自定義函數。

function resetScrollTop() { 
    currentScrollTop = $(this).scrollTop(); 
    lastScrollTop  = 0; 
    $('nav').removeClass('active'); 
}

我甚至通過currentScrollTop設置爲零，這是第一個明顯的滾動試驗覆蓋，但似乎沒有任何效果（而且也不徹底消除了復位功能）：

currentScrollTop = 0

控制檯日誌

我已經登錄這兩個值彼此相鄰，試圖建立這是怎麼回事：

function logScroll() { 
    console.log(currentScrollTop + ' ' + lastScrollTop); 
}

當我打開第一頁，向下滾動通常currentScrollTop總是至少lastScrollTop + 1：

但每次巴爾巴過渡後，當我向下滾動我發現， currentScrollTop和lastScrollTop等於某些時間，我認爲這是造成問題的原因。我只是不知道什麼會導致他們在同步增加：

任何幫助/想法將大規模讚賞。

來源

2017-08-05 jx3

我通過運行resetScrollTop()最終解決了這個問題，當轉換是在onEnter和onCompleted。

我還將$('.js-nav').addClass('hide')添加到onLeave函數，該函數將visibility: hidden;添加到.nav元素。

然後我在該函數中添加了$('.js-nav').removeClass('hide');到向下滾動條件。

感覺混亂，但似乎是做伎倆，是性能和工程跨越最新的Chrome，Firefox和Safari。

來源

2017-08-06 11:17:01 jx3

上滾動隱藏資產淨值降下來，不是與barba.js頁面過渡

回答

相關問題