上滚动隐藏资产净值降下来，不是与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页面过渡

回答

相关问题