title: Change background color multiple times while scrolling down the page
body: <p>I'm working on this project where I’m creating a website using parallax scrolling. It's supposed to be one long one pager. As you scroll down the page the background color is supposed to change when you get to each new section of the page. </p>
  
  <p>I have spent days searching the web and also here on stackoverflow, but I haven't found anything that works in the way i want it to. </p>
  
  <p>I found this script here on stack:</p>
  
  <pre><code> var tStart = 100 // Start transition 100px from top
        , tEnd = 500   // End at 500px
        , cStart = [250, 195, 56]  // Gold
        , cEnd = [179, 217, 112]   // Lime
        , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]];
  
      $(document).ready(function(){
          $(document).scroll(function() {
              var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
              p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
              var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
              $("body").css('background-color', 'rgb(' + cBg.join(',') +')');
          });
      });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dtZDZ/12/" rel="nofollow">http://jsfiddle.net/dtZDZ/12/</a> Here is the fiddle</p>
  
  <p>This script does exactly what I want, except that I only change color one time back and forth. I need it to change background color like 4-5 times while you scroll down the page. Also I would like it to have a smooth transition when changing colors like in the fiddle :)</p>
  
  <p>I hope someone out there can help me with this or just point me in the right direction. </p>
  
  <p>Thank you in advance</p>