title: How to create a color transition controlled by window scroll
body: <p>I have written some simple jQuery to have the background of my navbar change opacity from transparent to blue relative to the users scroll position.</p>
  
  <pre><code>  $(window).scroll(function(){
  
    var range = $(this).scrollTop();
    var limit = 450;
  
    var calc = range / limit;
    console.log(range);
  
    //Bg Opacity Control
    if (range === 0) {
      $('.navBg').css({
        opacity: 0
      });
  
    }else if(range &lt; limit){
      $('.navBg').css({
        opacity: calc
      });
  
  
    }else if(range &gt; limit){
      $('.navBg').css({
        opacity: 1
      });
    }
  
  });
  </code></pre>
  
  <p>My next task is to have the font color transition as well. I want the color to change the same way the navs background changes (relative to the users scroll position). I started by creating two arrays containing hexadecimal values of colors to represent the color scale for the font transition.</p>
  
  <pre><code>  //Blue to White
    var fontScale = ["#19BFFF",
                    "#336CFF",
                    "#4CCDFF",
                    "#66D4FF",
                    "#7FDBFF",
                    "#99E2FF",
                    "#B2E9FF",
                    "#CCF0FF",
                    "#E5F7FF",
                    "#FFF"];
  
    //White to Gray
    var hoverScale = ["#eaeaea",
                     "#d6d5d5",
                     "#c1c0c1",
                     "#adacac",
                     "#989798",
                     "#848283",
                     "#6f6e6e",
                     "#5a595a",
                     "#464445",
                     "#323031"];
  </code></pre>
  
  <p>With my scrollTop() limit set to 450, within where these transitions should take place, I have 10 colors in each array. I want to change the CSS of the font color each time the user scrolls down 45px ( 450 / 10 = 45 ) by iterating through the colors in the arrays.</p>
  
  <p>Here are my jQuery selectors for the elements that should be changing color using the arrays I posted above:</p>
  
  <pre><code>    //Main Font color to use fontScale array
      $('.navbar .navbar-header .navbar-brand')
      $('.navbar #navbar ul li a ')
  
      //active links to use hoveScale array
      $('.navbar #navbar .navbar-nav &gt; .active &gt; a')
      //Hover links to use hoverScale array
      $('.navbar #navbar ul li a:hover')
  </code></pre>
  
  <p>I'm unsure wether I should be using a for loop, a while loop, or purely if statements? Some advice or direction would be greatly appreciated! I can also post more code upon request.</p>
  
  <p>Cheers!    </p>
  
  <p>**UPDATE</p>
  
  <p>Here is my HTML.</p>
  
  <pre><code>  &lt;div class="navBg"&gt;
      &lt;/div&gt;
      &lt;nav class="navbar navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;span class="navbar-brand" href="#home"&gt;JG&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse navbar-right"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>This is my updated jQuery:</p>
  
  <pre><code>  var currentFontIndex = range * fontScale.length / limit;
  
    currentFontIndex = Math.round(currentFontIndex);
    console.log(fontScale[currentFontIndex]);
  
    if(currentFontIndex &gt; fontScale.length){
  
      $('.navbar .navbar-header .navbar-brand').css({
        color: fontScale[currentFontIndex]
      });
      $('.navbar #navbar ul li a').css({
        color: fontScale[currentFontIndex]
      });
  
    }
  </code></pre>
  
  <p>For some reason the styles aren't being applied and I'm not sure why. My selectors are properly set to override the style set in my CSS stylesheet. Also, the fontScale array index is logging to my console the correct index values.</p>
  
  <p>Any ideas?</p>