Question

我在每个部分都有一个十六进制颜色值，当一个部分到达屏幕顶部时（标题为-180px）我想为header元素分配一个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();

到达视口顶部时将数据类型值设置为元素

1 个答案: