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

Question

我已经被这个问题困扰了一段时间了。我正在尝试制作自己的滚动间谍。问题是它只有在手工编码时才有效，如果我尝试通过变量来完成它，它会一直给我

$(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”函数变量将未定义。

如果您想为“检查”功能使用变量，请尝试将设置间隔调用移动到脚本末尾，如下所示：

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

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