title: Why are the elements in Stellar.js not moving?
body: <p>I have 3 circles in the header that are suppose to fall at different rates when scrolled via stellar.js; unfortunatly, they dont even move.  They all have position attributes(absolute);
  Moreover, I've applied the<code>data-stellar-ratio</code> to the approprate tags.  Why won't stellar.js work? Even further, how does one test for jQuery to know if it's just not pilot error?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="companyInfo" &gt;
      &lt;div class="circlefront" data-stellar-ratio="1.2"&gt;&lt;/div&gt;
      &lt;div class="circlemiddle" data-stellar-ratio="1.8"&gt;&lt;/div&gt;
      &lt;div class="circlerear" data-stellar-ratio="3"&gt;&lt;/div&gt;
      &lt;div class="infoWrapper"&gt;
        &lt;h1&gt;Towing, you can't do it without a truck, i have a truck&lt;/h1&gt;
        &lt;p&gt;Id abunum ta inte publicae adhui senterem praties tantiena quitas vis, factum destus. Loca vehebus; et? Ti. Upionem, sil tala morbit ina, nique confendum tati et acepsen ihilin sula audactorips, fatur ia consign arisulos inatuis.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>  </p>
  
  <pre class="lang-css prettyprint-override"><code>section#company div#companyInfo {
    height: 24em;
    line-height: 3em;
    margin: 0 auto;
    color: #fff;
  }
  section#company div#companyInfo div.infoWrapper {
    width: 960px;
    margin: 5em auto;
    text-align: center;
  }
  section#company div#companyInfo div.infoWrapper h1 {
    font-size: 2em;
  }
  section#company div#companyInfo div.infoWrapper p {
    line-height: 1.2em;
    font-size: 1.125em;
  }
  section#company .circlefront {
    background: rgba(255, 255, 255, 0.7);
    width: 500px;
    height: 500px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    position: absolute;
    top: 300px;
    left: 400px;
  }
  section#company .circlemiddle {
    background: rgba(255, 255, 255, 0.5);
    width: 250px;
    height: 250px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    position: absolute;
    top: 100px;
    left: 200px;
  }
  section#company .circlerear {
    background: rgba(255, 255, 255, 0.3);
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    position: absolute;
    top: 350px;
    right: 100px;
  }
  </code></pre>
  
  <p><strong>jQuery</strong>  </p>
  
  <pre><code>&lt;script src="asset/js/libs/jquery.stellar.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
  
  $(function(){
              $.stellar({
                  horizontalScrolling: false,
                  verticalOffset: 0,
              });
          });
  &lt;/script&gt;
  </code></pre>
  
  <p><em>resources</em>
  <a href="http://markdalgleish.com/projects/stellar.js/docs/" rel="nofollow noreferrer">stellar.js</a>
  <a href="http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/" rel="nofollow noreferrer">tutorial on using stellar.js</a></p>