title: Use JavaScript/jQuery to change linear gradient percentage
body: <p>I have a page with a linear gradient in the wrapper element. </p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The CSS is:</p>
  
  <pre><code>#wrapper {
      position: relative;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: -1;
      background: -webkit-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Firefox 3.6 - 15 */
      background: linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%);
      padding-bottom: 1px;
  }
  </code></pre>
  
  <p>The gradient shows up ok on its own. However, I want to use js/jquery to change the gradient as I scroll down the page. I don't think the current js code is affecting anything at the moment. How do I fix this? Thanks.</p>
  
  <pre><code>$(window).scroll(function(){
          var topDis = $(window).scrollTop();
          $("#wrapper").css("background", "linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);");
          $("#wrapper").css("background", "-webkit-linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);")
        });
  </code></pre>