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

Question

我在每个部分都存储了一个十六进制颜色值，当一个部分到达屏幕顶部时(标题为 -180 像素)，我想为标题元素分配一个 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');
            }
        }
    });
});

Answer 1

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

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