2012-09-03 4 views
0

저는 개발중인 사이트에 Stellar.js (http://markdalgleish.com/projects/stellar.js/)를 구현하려고합니다. 나는 시각적 스크롤링을 윈도우/바디를 사용하는 대신에 콘테이너 내부에 넣을 필요가 있음을 깨달았습니다 (뷰포트를 고려하여 iPad에서 작동하기 위해). 스크립트가 제대로 시작되지 않는 것 같습니다. 여기 div에서 Stellar.js를 시작할 수 없습니다.

내가 사이트에 설치를했습니다 구조입니다 -

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

자바 스크립트

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

내가 볼 수있는 시차 이미지 내부 섹션 가져 오기 표시 : 없음,하지만 그 이외의 스크립트가 실행중인 것 같습니다. JS 오류가 없습니다.

답변

0

나는 당신과 position: absolute을 사용하고 div를 제공하지 않을 수도 있다고 생각합니다.

#content div의 크기를 확인 했습니까? 아니면 항성도 이것을 처리합니까?

+0

실제로 필요한 것이 없습니다. 나는이 문제를 포기하고 수십 가지 접근법을 시도했다. –

관련 문제