javascript - 在到达视口(viewport)顶部时将数据类型值设置为元素

我在每个部分上存储了一个十六进制颜色值，当一个部分到达屏幕顶部时（标题为-180px），我想为标题元素分配一个css属性，以便在滚动浏览时更改文本颜色部分。我没有收到任何错误，并且在调试此问题时遇到了麻烦。

http://www.amypreston.co.uk/

$(window).load(function() {
    var $header = $("header");
    var numberOfSections = $("section").length;
    var sectionOffsets = [];
    var sectionColour = $("section").eq(i).data("colour");

    for(var i = 0; i < numberOfSections; i++) {
        sectionOffsets.push($("section").eq(i).offset().top);
    }

    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();

        for(var i = 0; i < numberOfSections; i++) {
            if(scrollTop > sectionOffsets[i] - 180) {
                $header.css('color', 'sectionColour');
            }
        }
    });
});

最佳答案

我不知道这是不是偶然发生的，但是

var sectionColour = $("section").eq(i).data("colour");

不合适。它使用仅在窗口滚动处理程序中定义的变量i。

请注意，每次滚动处理程序运行时，您不仅需要在窗口加载时，还需要获取节的颜色。您需要从上方将这一行放在滚动处理程序内的循环中。

另外，如注释中所述，您需要将sectionColour用作变量，而不是像现在一样使用字符串。必须删除单引号，以便'sectionColour'变成sectionColour。

这是您的固定代码：

$(window).load(function() {
    var $header = $("header");
    var numberOfSections = $("section").length;
    var sectionOffsets = [];

    for(var i = 0; i < numberOfSections; i++) {
        sectionOffsets.push($("section").eq(i).offset().top);
    }

    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();

        for(var i = 0; i < numberOfSections; i++) {
            if(scrollTop > sectionOffsets[i] - 180) {
                var sectionColour = $("section").eq(i).data("colour");
                $header.css('color', sectionColour);
            }
        }
    });
});

附带一提，您可以将代码缩短为：

$(window).scroll(function () {
     $("section").each(function () {
        if ($(window).scrollTop() > $(this).offset().top - 180) {
            $("header").css('color', $(this).data("colour"));
        }
    });
}).scroll();