Stellar.jsの要素が動かないのはなぜですか？

Question

私は、stellar.jsでスクロールしたときに異なるレートで落ちると思われる3つの円をヘッダに持っています。不幸にも、彼らは動かない。それらはすべて位置属性（絶対）を持っています。 さらに、私はdata-stellar-ratioをapproprateタグに適用しました。なぜ恒星ではありませんか？さらに、jQueryがパイロットエラーではないかどうかを知るために、どのようにしてjQueryをテストしますか？

HTML

<div id="companyInfo" > 
    <div class="circlefront" data-stellar-ratio="1.2"></div> 
    <div class="circlemiddle" data-stellar-ratio="1.8"></div> 
    <div class="circlerear" data-stellar-ratio="3"></div> 
    <div class="infoWrapper"> 
     <h1>Towing, you can't do it without a truck, i have a truck</h1> 
     <p>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.</p> 
    </div> 
    </div> 

CSS

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; 
} 

jQueryの

<script src="asset/js/libs/jquery.stellar.min.js"></script> 
<script type="text/javascript"> 

$(function(){ 
      $.stellar({ 
       horizontalScrolling: false, 
       verticalOffset: 0, 
      }); 
     }); 
</script> 

リソース stellar.js tutorial on using stellar.js

Answer 1

私はちょうどあなたのウェブサイト&を保存したすべては私には正常に見えるが、まだいくつかの問題がある、あなたのコードの周りに果たしました。だから、あなたのスクリプトタグをすべて削除しました& jquery & stellar from stellar demo &それはうまくいきます。私が見つけた唯一のバグはありますが、それがこの動作の理由であることはわかりません。 verticaloffset：0の後に余分なカンマがあります。以下は

$(function(){ 
    $.stellar({ 
     horizontalScrolling: false, 
     verticalOffset: 0, /* Remove this comma at the end */ 
    }); 
}); 

あなたのウェブサイトは、それがコードを見て&ダウンロードしたzipフォルダ内にあります。

https://dl.dropbox.com/u/19982181/svs.zip

が、これはあなたを助けることを願っています。