Scroll through blocks of color while scrolling

colorScroller.js

//for an example of this working, see the hamburger menu on mobile at brentonstrine.com

//define colors to scroll through
var colorWheel = [
    "chocolate",
    "coral",
    "cornflowerblue",
    "darkslateblue",
    "crimson",
    "darkcyan",
    "darkorange",
    "dodgerblue",
    "gold",
    "darksalmon",
    "firebrick",
    "deepskyblue"
];
colorWheel[-1] = "deepskyblue";
   
$(document).ready(function(){

    // open and close menu
    $(".nav").on("click", function(){
        $(this).toggleClass("open");
    });
    // don't close menu when a link is clicked
    $(".nav").on("click", "a", function(e){
        e.stopImmediatePropagation()
    });

    // scroll blocks of colors through hamburger menu while scrolling
    var burgerScroller = function(e){
        var stepSize = 50;
        var colorCount = colorWheel.length;
        var repeatSize = (stepSize * colorCount);

        var totalOffset = $("body").scrollTop();
        var stepOffset = totalOffset % stepSize;
        var repeatOffset = (totalOffset % repeatSize );
        var colorOffset = Math.floor( repeatOffset / stepSize );

        var topColor = colorWheel[colorOffset];
        var bottomColor = colorWheel[colorOffset - 1];
        
        var gradient = "background-image:repeating-linear-gradient(to top, " +
          topColor + " 0px, " +
          topColor + " " + stepOffset + "px, " +
          bottomColor + " " + stepOffset + "px, " +
          bottomColor + " " + stepSize + "px);";

        $(".nav").attr("style", gradient);
    }

    // toggle scroller on resize
    $(window).resize(function(){
	if ( $(window).width() <= 600 ) {
            $(window).on("scroll.scrollBurger", burgerScroller);
	} else {
            $(window).off("scroll.scrollBurger", burgerScroller);
            $(".nav").removeAttr("style");
        }
    });

    // turn on scroller if initially small
    if($(window).width() <= 600) {
        $(window).on("scroll.scrollBurger", burgerScroller);
    }
});