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

Question

I have a hex colour value stored on each section and when a section reaches the top of the screen (-180px for the header) I want to assign a css property to the header element in order to change the text colour as you scroll through the sections. I am not getting any errors and I am having trouble debugging this issue.

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

I dont know if it happened by accident, but the line

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

is out of place. it uses a variable i which is only defined in the window scroll handler.

notice that you need to retrieve the section color each time the scroll handler runs, and not only on window load. you need to place this line from above in the loop inside the scroll handler.

Plus, as stated on the comments, you need to use the sectionColour as a variable, and not as a string like you do now. the single quote marks must be removed, so 'sectionColour' turns into sectionColour .

here is your fixed code:

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

On a side note, you could shorten your code into this:

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