jQuery улучшить производительность функции

Question

Я написал собственный скрипт, который проверяет текущую позицию в окне просмотра, а затем соответственно выделяет текущий элемент в фиксированной навигации заголовка.

Порядок элементов навигации совпадает с порядком объявления переменных смещения.

Я вызываю эту функцию на scroll(), но у меня такое ощущение, что это не лучший результат, поскольку он проверяет все время, когда пользователь прокручивает. Может быть, лучший подход может быть, например, проверить в конце события прокрутки? Но я не мог найти способ реализовать это.

Есть ли у вас какие-либо идеи о том, как улучшить производительность функциональности?

Вот мой код:

$window = $(window); 

$window.scroll(function() { 
      activeState(); 
     } 
    ); 

function activeState() { 
     var offsetHome = $('#Home').position().top; 
     var offsetLeistungen = $('#Leistungen').position().top; 
     var offsetPortfolio = $('#Portfolio').position().top; 
     var offsetUeber = $('#Ueber').position().top; 
     var offsetKontakt = $('#Kontakt').position().top; 
     var headerHeight = $('.header').height(); 
     $('#PrimNav li').removeClass('active'); 
     if($window.scrollTop() <= offsetLeistungen - headerHeight) { 
      $('#PrimNav li:nth-child(1)').addClass('active'); 
     } else if($window.scrollTop() <= offsetPortfolio - headerHeight) { 
      $('#PrimNav li:nth-child(2)').addClass('active'); 
     } else if($window.scrollTop() <= offsetUeber - headerHeight) { 
      $('#PrimNav li:nth-child(3)').addClass('active'); 
     } else if($window.scrollTop() <= offsetKontakt - headerHeight) { 
      $('#PrimNav li:nth-child(4)').addClass('active'); 
     } else { 
      $('#PrimNav li:nth-child(5)').addClass('active'); 
     } 
    }; 

Спасибо!

Answer 1

Если позиция элементов фиксирована, вы можете переместить объявление из своей функции activateState(), потому что каждый раз, когда срабатывает событие прокрутки, он снова объявляет эти переменные, что не очень эффективно. Вы также не должны получать значение $ (window) .scrollTop() в каждом операторе if. Вычислите его один раз в событии прокрутки и передайте его значение для активацииState();

Обновлено:

var offsetHome = 0; 
var offsetLeistungen = 0; 
var offsetPortfolio = 0; 
var offsetUeber = 0; 
var offsetKontakt = 0; 
var headerHeight = 0; 
$window = $(window); 

$window.scroll(function() { 
      activeState($window.scrollTop()); 
     } 
    ); 

function activeState(scrollTop) { 
     offsetHome = $('#Home').position().top; 
     offsetLeistungen = $('#Leistungen').position().top; 
     offsetPortfolio = $('#Portfolio').position().top; 
     offsetUeber = $('#Ueber').position().top; 
     offsetKontakt = $('#Kontakt').position().top; 
     headerHeight = $('.header').height(); 
     $('#PrimNav li').removeClass('active'); 
     if(scrollTop <= offsetLeistungen - headerHeight) { 
      $('#PrimNav li:nth-child(1)').addClass('active'); 
     } else if(scrollTop <= offsetPortfolio - headerHeight) { 
      $('#PrimNav li:nth-child(2)').addClass('active'); 
     } else if(scrollTop <= offsetUeber - headerHeight) { 
      $('#PrimNav li:nth-child(3)').addClass('active'); 
     } else if(scrollTop <= offsetKontakt - headerHeight) { 
      $('#PrimNav li:nth-child(4)').addClass('active'); 
     } else { 
      $('#PrimNav li:nth-child(5)').addClass('active'); 
     } 
    };