Tại sao các thành phần trong Stellar.js không di chuyển?

Question

Tôi có 3 vòng kết nối trong tiêu đề được cho là giảm ở các mức khác nhau khi được cuộn qua stellar.js; không may, họ thậm chí không di chuyển. Tất cả đều có thuộc tính vị trí (tuyệt đối); Hơn nữa, tôi đã áp dụng các data-stellar-ratio cho các thẻ approprate. Tại sao stellar.js không hoạt động? Hơn nữa, làm thế nào để một thử nghiệm cho jQuery biết nếu nó không phải là lỗi phi công?

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> 

nguồn stellar.js tutorial on using stellar.js

Answer 1

tôi chỉ lưu trang web của & chơi khoảng mã tất cả mọi thứ bạn có vẻ tốt đẹp đối với tôi nhưng vẫn còn một số vấn đề. Vì vậy, tôi đã xóa tất cả các thẻ tập lệnh của bạn & thêm jquery & sao từ bản trình diễn sao & nó hoạt động tốt. Chỉ có một lỗi tôi tìm thấy, nhưng tôi không biết đó là lý do cho hành vi này. Có thêm dấu phẩy sau khi thiết lập dọc: 0.

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

Dưới đây là trang web của bạn trong thư mục zip tải xuống & hãy xem mã.

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

Hy vọng điều này sẽ giúp bạn.