Question

如果用户向下滚动到某一点，我要求我们的粘性条必须换成另一个条。我有工作代码但是当我看到它的性能时它很慢。我使用Chrome Dev Tool有时会超过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等内容以及使用半径的阴影或边框。

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

使用scrollTop替换60 FPS性能的粘性导航栏的替代方法？

1 个答案: