用scrollTop替换粘性导航条以获得60 FPS的性能

Alternative of swapping out sticky nav bar for 60 FPS performance with scrollTop?

本文关键字：FPS 性能 替换 scrollTop 导航      更新时间：2023-09-26

我有一个要求，如果用户向下滚动到某个点，我们的粘性条必须交换为另一个条。我有工作代码，但当我看性能时，它相当慢。我使用Chrome开发工具，有时它会超过30 FPS，这会导致滚动缓慢。

这是我想知道的代码，我该如何编码，而不使用scrollTop来不断检查滚动条的位置以获得更好的性能？

我已经使用debounce来减少触发的事件数量，但仍然看到一些性能影响。

if ( this.dom.singleTitle.length ) { // this is to check if the element is present on the page
    this.dom.window.on('scroll', $.proxy( debounce( this.toggleNav, 50 ), this ) )
}

    toggleNav: function() {
        var screenTop = this.dom.document.scrollTop();
        if ( screenTop > this.dom.singleTitle.offset().top + 50 ) {
            if ( this.dom.mainNav.hasClass('expanded') ) {
                this.dom.mainNav.removeClass('expanded');
                this.dom.toggleTopbar.toggleClass('icon-menu icon-close');
                this.dom.body.removeClass('disable');
            }
            this.dom.headerShare.fadeIn(600);
        }
        else {
            this.dom.headerShare.fadeOut(600);
        }
    }

如果可能的话，尽量使用CSS3，只使用jQuery作为后备。CSS3动画要流畅得多。不要使用scrollTop，而是使用转换translate3d，您会注意到差异。

要查看css3是否受支持，可以查看此解决方案。

此外，尽量避免fadeIn或fadeOut以及使用阴影或带半径的边界。

需要说明的是，图像应该在重量和大小上进行优化，以便在设置动画时获得更好的性能。

相关文章：