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

时间:2016-09-07 15:25:42

标签: jquery 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/

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

1 个答案:

答案 0 :(得分:0)

在Javascript中,只提升变量声明,而不是初始化。因此,当你打电话给&#34; setInterval&#34;在你的document.ready函数中,&#34;检查&#34;函数变量将是未定义的。

如果您想使用变量进行&#34;检查&#34;函数,尝试将您的设置间隔调用移动到脚本的末尾,如下所示:

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

这应该让您的脚本解雇,但我怀疑您需要更多的工作才能使您的滚动间谍扩展功能完全正常运行。