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

如果元素＆＃39;位置是固定的，那么你可以将声明移出你的activateState（）函数，因为每次滚动事件触发它都会再次声明那些变量并不是真正有效的变量。您也不必在每个if语句中获得$（window）.scrollTop（）值。在scroll事件上计算一次，并将其值传递给activateState（）;

<强>更新

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');
        }
    };

jQuery提高了函数的性能

1 个答案: