無法啓動Stellar.js從

Question

我試圖實施Stellar.js（http://markdalgleish.com/projects/stellar.js/）到我正在開發的網站。我意識到我需要將視差滾動放入容器中，而不是使用窗口/主體，以便它在iPad上工作（考慮視口），這就是我遇到問題的地方;該腳本似乎並未正確啓動。

下面是我在網站上設置的結構 -

HTML

<header></header> 
     <!-- keeping this content outside of #content because of a prefixed alignment --> 

     <div id="content"> 

     <section id="example" data-stellar-background-ratio="1"> 
      <img src="example-1.png" data-stellar-ratio="2" data-stellar-offset="-25"> 
      <img src="example-2.png" data-stellar-ratio="3" data-stellar-offset="-50"> 
      <img src="example-3.png" data-stellar-ratio="4" data-stellar-offset="0"> 
     </section> 

    </div> 

CSS

#content { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    } 

section { 

     background-attachment: fixed; 
     width: 100%; 
     height: 100%; 
     position: relative; 
    } 
     img:first-child { 
      position: absolute; 
      top: 0; 
      left: 300px; 
     } 
     img:nth-child(2) { 
      position: absolute; 
      z-index: 99; 
      top: 0; 
      right: 150px; 
     } 
     img:nth-child(3) { 
      position: absolute; 
      z-index: 99; 
      top: 0; 
      left: 100px; 
     } 

的JavaScript

$('#content').stellar({ 
     horizontalScrolling: false 
    }); 

我可以看到視差圖像在 - 的裏面 部分得到顯示：無，但除了該腳本似乎沒有運行。我沒有得到JS錯誤。

Answer 1

我在想這可能與你有關，使用position: absolute而不是給div任何。

您是否檢查了#content div的大小？還是恆星處理這呢？