javascript – Block color change as page scrolls

Question:

How can I make the menu bar gradually change from one color to another as the page scrolls?

section {
  height: 1000px;
}

section:nth-of-type(even) {
  background-color: #ccc;
}

section:nth-of-type(odd) {
  background-color: #ddd;
}

#main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to right, white, red);
}
<div id="main"></div>
<article>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

Answer:

As an option:

$(document).ready(function(){
    $(window).scroll(function(){
            let step = 100;
                let x = 255;
                let y = 0;
                let z = 0;
                if ($(window).scrollTop() > 0 && $(window).scrollTop() < 255){
                    x = 0;
                    y = 0 + $(window).scrollTop();
                    z = 255;
                }else if ($(window).scrollTop() > 255 && $(window).scrollTop() < 510){
                    x = 0;
                    y = 255;
                    z = 255 - $(window).scrollTop() + 255;
                } else if ($(window).scrollTop() > 510 && $(window).scrollTop() < 765){
                    x = 0 + $(window).scrollTop() - 510;
                    y = 255;
                    z = 0;
                } else if ($(window).scrollTop() > 765 && $(window).scrollTop() < 1120){
                    x = 255;
                    y = 255 - $(window).scrollTop() + 765;
                    z = 0;
                } else if ($(window).scrollTop() > 1120 && $(window).scrollTop() < 1375){
                    x = 0;
                    y = 255 - $(window).scrollTop();
                    z = 255;
                } else {
                    x = 0;
                    y = 0;
                    z = 255;
                }
                let param = 'rgb('+x+', '+y+', '+z+')';
                $("#main").css('background', param);

        });
});
    body {
        height: 1000px;
    }
    section {
        height: auto;
    }

    section:nth-of-type(even) {
        background-color: #ccc;
    }

    section:nth-of-type(odd) {
        background-color: #ddd;
    }

    #main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100px;
        background: blue;
    }
    #boddy{
        height: 1000px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</article>
</div>

Variant with iridescent gradient:

    $(document).ready(function(){
        $(window).scroll(function(){
                let step = 100;
                    let x = 255;
                    let y = 0;
                    let z = 0;
                    if ($(window).scrollTop() > 0 && $(window).scrollTop() < 255){
                        x = 0;
                        y = 0 + $(window).scrollTop();
                        z = 255;
                    }else if ($(window).scrollTop() > 255 && $(window).scrollTop() < 510){
                        x = 0;
                        y = 255;
                        z = 255 - $(window).scrollTop() + 255;
                    } else if ($(window).scrollTop() > 510 && $(window).scrollTop() < 765){
                        x = 0 + $(window).scrollTop() - 510;
                        y = 255;
                        z = 0;
                    } else if ($(window).scrollTop() > 765 && $(window).scrollTop() < 1120){
                        x = 255;
                        y = 255 - $(window).scrollTop() + 765;
                        z = 0;
                    } else if ($(window).scrollTop() > 1120 && $(window).scrollTop() < 1375){
                        x = 0;
                        y = 255 - $(window).scrollTop();
                        z = 255;
                    } else {
                        x = 0;
                        y = 0;
                        z = 255;
                    }
                    let param = 'rgb('+x+', '+y+', '+z+')';
                    $("#main").css('background', 'linear-gradient(to right, '+param+', red)');

            });
    });
    body {
        height: 1000px;
    }
    section {
        height: auto;
    }

    section:nth-of-type(even) {
        background-color: #ccc;
    }

    section:nth-of-type(odd) {
        background-color: #ddd;
    }

    #main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100px;
        background: blue;
    }
    #boddy{
        height: 1000px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</article>
</div>

Option with mouse tracking and gradient change:

    $(document).ready(function(){
        $(window).mousemove(function(event){
            let xz = event.clientX;
            let yz = event.clientY;

            xz = xz + yz;

                let step = 100;
                    let x = 255;
                    let y = 0;
                    let z = 0;

                    let x1 = 255;
                    let y1 = 0;
                    let z1 = 0;

                    if (xz > 0 && xz < 255){
                        x = 0;
                        y = 0 + xz;
                        z = 255;
                    } else if (xz > 255 && xz < 510){
                        x = 0;
                        y = 255;
                        z = 255 - xz + 255;
                    } else if (xz > 510 && xz < 765){
                        x = 0 + xz - 510;
                        y = 255;
                        z = 0;
                    } else if (xz > 765 && xz < 1020){
                        x = 255;
                        y = 255 - xz + 765;
                        z = 0;
                    } else if (xz > 1020 && xz < 1275){
                        x = 255;
                        y = 0;
                        z = 0 + xz - 1020;
                    } else if(xz > 1275 && xz < 1530){
                        x = 255 - xz +1275;
                        y = 0;
                        z = 255;
                    } else {
                        x = 0;
                        y = 0 + xz -1530;
                        z = 255;
                    }
                    if (yz > 0 && yz < 255){
                        x1 = 0;
                        y1 = 0 + yz;
                        z1 = 255;
                    }else if (yz > 255 && yz < 510){
                        x1 = 0;
                        y1 = 255;
                        z1 = 255 - yz + 255;
                    } else if (yz > 510 && yz < 765){
                        x1 = 0 + yz - 510;
                        y1 = 255;
                        z1 = 0;
                    } else if (yz > 765 && yz < 1120){
                        x1 = 255;
                        y1 = 255 - yz + 765;
                        z1 = 0;
                    } else if (yz > 1120 && yz < 1375){
                        x1 = 0;
                        y1 = 255 - yz;
                        z1 = 255;
                    } else {
                        x1 = 0;
                        y1 = 0;
                        z1 = 255;
                    }
                    let param = 'rgb('+x+', '+y+', '+z+')';
                    let param1 = 'rgb('+x1+', '+y1+', '+z1+')';
                    $("#main").css('background', 'linear-gradient(to right, '+param+', '+param1+')');

            });
    });
    body {
        height: 1000px;
    }
    section {
        height: auto;
    }

    section:nth-of-type(even) {
        background-color: #ccc;
    }

    section:nth-of-type(odd) {
        background-color: #ddd;
    }

    #main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100px;
        background: blue;
    }
    #boddy{
        height: 1000px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</article>
</div>

Responsive variant of cursor tracking and gradient change.

    $(document).ready(function(){
        $(window).mousemove(function(event){
            let xz = event.clientX;
            let yz = event.clientY;

            var xwin1 = $(window).width() / 100;
            var ywin1 = $(window).height() / 100;

            xz = Math.round(xz / xwin1);
            yz = Math.round(yz / ywin1);
            let zz = Math.abs((xz+yz)/2);
            zz = Math.round((zz * 350) / 100);

            if (Math.abs(xz-yz) < 25){
                yz = Math.abs(100-yz);
            }

            let param = 'hsl('+zz+', '+xz+'%, '+yz+'%)';
            let param1 = 'hsl('+zz+', '+yz+'%, '+xz+'%)';
            $("#main").css('background', 'linear-gradient(to right, '+param+', '+param1+')');

            });
    });
    body {
        height: 1000px;
    }
    section {
        height: auto;
    }

    section:nth-of-type(even) {
        background-color: #ccc;
    }

    section:nth-of-type(odd) {
        background-color: #ddd;
    }

    #main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100px;
    }
    #boddy{
        height: 1000px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</article>
</div>
Scroll to Top