Assigning a specific data type value to an element as it enters the top of the viewport

Question

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no errors showing up, I am struggling to debug this issue.

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

javascript jquery html css

Answer 1

Answer №1

It seems like an oversight, but the line of code

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

is in the wrong place. It relies on a variable i that is only defined within the window scroll handler.

Remember to fetch the section color each time the scroll handler is activated, not just on window load. Move the mentioned line into the loop inside the scroll handler.

Furthermore, as indicated in the comments, make sure to treat sectionColour as a variable, not a string as it currently appears. Remove the single quote marks so that 'sectionColour' becomes sectionColour.

Here's the corrected version of your 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);
            }
        }
    });
});

As a side note, you can simplify your code like this:

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

Answer 2

It seems like an oversight, but the line of code

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

is in the wrong place. It relies on a variable i that is only defined within the window scroll handler.

Remember to fetch the section color each time the scroll handler is activated, not just on window load. Move the mentioned line into the loop inside the scroll handler.

Furthermore, as indicated in the comments, make sure to treat sectionColour as a variable, not a string as it currently appears. Remove the single quote marks so that 'sectionColour' becomes sectionColour.

Here's the corrected version of your 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);
            }
        }
    });
});

As a side note, you can simplify your code like this:

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

Assigning a specific data type value to an element as it enters the top of the viewport

Answer №1

Similar questions

What sets apart ajax calls from getJSON requests?

Acquiring HTML form information in ASP.NET controller

Understanding how to bind data in JavaScript client-side templates

Decoding date formats using d3.js version 4

Obtaining localStream for muting microphone during SIP.js call reception

What is the best approach to incorporating two distinct grid layouts within a single section?

Issue with hashtag in regular expressions

Sending requests across domains from HTTPS to HTTP with callback functionality, and reversing the process

Exploring the capabilities of the Vuejs EventBus

Leveraging the GetListItems method via an Ajax request in SharePoint 2010

Code: Ensuring URL spaces are maintained

How to save the value of `this.$route.params.id` in a Vue.js data property?

My script is unable to access the session variable

"div p" or "div * p"? Do they have the same meaning or is there a difference between them?

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

Thymeleaf is responsible for fetching the static resources by referencing the REST URI

Choose does not showcase the updated value

having trouble with npm installation of firebase-tools

Verify whether the content within the Div has been modified

The component <FormControl /> does not support the variant prop