Альтернатива замены липкой навигационной панели на 60 кадров в секунду с помощью scrollTop?

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, а также использование теней или границ с радиусом.

Иглы, чтобы сказать, изображения должны быть оптимизированы по весу и размеру для лучшей производительности при их анимации.