Javascript 用scrollTop替换粘性导航条以获得每秒60帧的性能的替代方案？

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

下面是我想知道的代码，我如何编写代码，而不是使用

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

之类的东西，以及使用阴影或半径边框

也就是说，在设置图像动画时，应该优化图像的重量和大小，以获得更好的性能