javascript - 使用 scrollTop 替换粘性导航栏以获得 60 FPS 性能的替代方案？

Question

我得到一个要求，如果用户向下滚动到某个点，我们的粘性条必须交换为另一个条。我有工作代码，但是当我查看性能时，它非常慢。我有时会使用 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);
        }
    }

Answer 1

如果可能，请尝试使用 CSS3，仅使用 jQuery 作为后备。CSS3 动画更加流畅。不使用 scrollTop，而是使用转换 translate3d，您会注意到不同之处。

要查看是否支持 css3，您可以检查 this solution .

此外，请尝试避免诸如 fadeIn 或 fadeOut 之类的事情，以及使用带半径的阴影或边框。

不用说，在为它们设置动画时，应该优化图像的重量和大小以获得更好的性能。