自定义 scrollspy jquery 仅在手动编码时有效

Question

我已经坚持了一段时间了。我正在尝试制作自己的 scrollspy。问题是它只有在手动编码时才有效，如果我尝试通过变量来实现它，它会一直给我

$(document).ready(function() {
    setInterval(check, 100);
});

function isScrolledIntoView()
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var year = $('.year').eq(2).attr("class");
    var test = year.split(' ');
    test = test[1];
    var elemTop = $(".item."+test).offset().top;
    var elemBottom = elemTop + $(".item."+test).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var check = function(){
    var itemslength = $('.year').length;
    for (var i = itemslength-1; i >= 0; i--) {
        var year = $('.year').eq(i).attr("class");
        var yearsplitted = year.split(' ');
        if(isScrolledIntoView())
        {
            $(".year.2016").addClass("item-active");
        }
        else
        {
            $(".year.2016").removeClass("item-active");
        }
    }
};

第一个功能可以看到

var elemTop = $(".item."+test).offset().top;

如果我尝试通过变量来做到这一点，那是行不通的。

http://jsfiddle.net/DFh7z/68/

编辑：我使用了错误的循环。

Answer 1

在Javascript中，只提升变量声明，不提升初始化。因此，当您在 document.ready 函数中调用 "setInterval" 时，"check" 函数变量将是未定义的。

如果您想为 "check" 函数使用变量，请尝试将设置间隔调用移动到脚本末尾，如下所示：

function isScrolledIntoView()
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var year = $('.year').eq(2).attr("class");
    var test = year.split(' ');
    test = test[1];
    var elemTop = $(".item."+test).offset().top;
    var elemBottom = elemTop + $(".item."+test).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var check = function(){
    var itemslength = $('.year').length;
    for (var i = itemslength-1; i >= 0; i--) {
        var year = $('.year').eq(i).attr("class");
        var yearsplitted = year.split(' ');
        if(isScrolledIntoView())
        {
            $(".year.2016").addClass("item-active");
        }
        else
        {
            $(".year.2016").removeClass("item-active");
        }
    }
};

$(document).ready(function() {
    setInterval(check, 100);
});

这应该会触发您的脚本，但我怀疑您需要做更多的工作才能使滚动间谍扩展功能正常运行。

自定义 scrollspy jquery 仅在手动编码时有效

Custom scrollspy jquery only works when handcoded

jquery

scrollspy