skrollr classic example footer

Question

Skrollr 플러그인을 올바르게 사용하도록 가르치려고하는데, 주로 설명서에 나와있는 고전적인 예제에 관심이 있습니다. (http://prinzhorn.github.io/skrollr/examples/classic.html).

내 문제는 내 바닥 글이 페이지 하단에 나타나지 않고 내 Skrollr 갤러리의 첫 번째 이미지 아래에 나타납니다. 이 갤러리는 특정 페이지에만 표시되므로 # skrollr-body와 별도로 바닥 글을 유지하려고합니다.

이것은 내 코드입니다. 본질적으로 예제의 약간 단순화 된 버전입니다.

HTML :

<div 
class="parallax-image-wrapper parallax-image-wrapper-100" 
data-anchor-target="#dragons + .gap" 
data-bottom-top="transform:translate3d(0px, 200%, 0px)" 
data-top-bottom="transform:translate3d(0px, 0%, 0px)"> 
    <div 
    class="parallax-image parallax-image-100" 
    style="background-image:url(/assets/img/rocks.jpg)" 
    data-anchor-target="#dragons + .gap" 
    data-bottom-top="transform: translate3d(0px, -50%, 0px);" 
    data-top-bottom="transform: translate3d(0px, 50%, 0px);"> 
    </div> 
</div> 
<div 
class="parallax-image-wrapper parallax-image-wrapper-100" 
data-anchor-target="#bacons + .gap" 
data-bottom-top="transform:translate3d(0px, 200%, 0px)" 
data-top-bottom="transform:translate3d(0px, 0%, 0px)"> 
    <div 
    class="parallax-image parallax-image-100" 
    style="background-image:url(/assets/img/tiles.jpg)" 
    data-anchor-target="#bacons + .gap" 
    data-bottom-top="transform: translate3d(0px, -50%, 0px);" 
    data-top-bottom="transform: translate3d(0px, 50%, 0px);"> 
    </div> 
</div> 
<div 
class="parallax-image-wrapper parallax-image-wrapper-100" 
data-anchor-target="#kittens + .gap" 
data-bottom-top="transform:translate3d(0px, 200%, 0px)" 
data-top-bottom="transform:translate3d(0px, 0%, 0px)"> 
    <div 
    class="parallax-image parallax-image-100" 
    style="background-image:url(/assets/img/sky.jpg)" 
    data-anchor-target="#kittens + .gap" 
    data-bottom-top="transform: translate3d(0px, -50%, 0px);" 
    data-top-bottom="transform: translate3d(0px, 50%, 0px);"> 
    </div> 
</div> 

<div id="skrollr-body"> 
    <div id="dragons"></div> 
    <div class="gap gap-100"></div> 
    <div id="bacons"></div> 
    <div class="gap gap-100"></div> 
    <div id="kittens"></div> 
    <div class="gap gap-100"></div> 
</div> 

<div id="footer"> 
    some footer stuff 
</div> 

과 CSS :

* { 
     padding:0; 
     margin:0; 
    } 

    html, body { 
     height:100%; 
    } 

    #content { 
     height:100%; 
     position: relative; 
    } 

    .skrollr-desktop body { 
     height:100% !important; 
    } 

    .parallax-image-wrapper { 
     position:fixed; 
     left:0; 
     width:100%; 
     overflow:hidden; 
    } 

    .parallax-image-wrapper-50 { 
     height:50%; 
     top:-50%; 
    } 

    .parallax-image-wrapper-100 { 
     height:100%; 
     top:-100%; 
    } 

    .parallax-image { 
     display:none; 
     position:absolute; 
     bottom:0; 
     left:0; 
     width:100%; 
     background-repeat:no-repeat; 
     background-position:center; 
     background-size:cover; 
    } 

    .parallax-image-50 { 
     height:200%; 
     top:-50%; 
    } 

    .parallax-image-100 { 
     height:100%; 
     top:0; 
    } 

    .parallax-image.skrollable-between { 
     display:block; 
    } 

    .no-skrollr .parallax-image-wrapper { 
     display:none !important; 
    } 

    #skrollr-body { 
     height:100%; 
     overflow:visible; 
     position:relative; 
    } 

    .gap { 
     background:transparent center no-repeat; 
     background-size:cover; 
    } 

    .skrollr .gap { 
     background:transparent !important; 
    } 

    .gap-50 { 
     height:50%; 
    } 

    .gap-100 { 
     height:100%; 
    } 

    #footer { 
     clear: both; 
     height: 100px; 
     background-color: red; 
    } 

Answer 1

이#skrollr-body 내부의 바닥 글 요소 를 넣습니다. 모든 것이 데스크톱/모바일에서 작동하도록하려면 #skrollr-body 외부에있는 본문 콘텐츠는 parallax-image-wrapper & parallax-image 세트의 고정 위치 컨트롤 및 속성입니다.

당신이 당신의 레이아웃의 요소를 배치 "고정"추가로 필요한 경우, 당신은 DIV의 data-anchor-target 속성을 설정하는 외부 #skrollr-body를 나열해야하고, 그때 당신은 당신이 필요로하는 곳마다 #skrollr-body에서 아래로 만들어 #ID 그 대상 전화 할게 그것을 표시합니다.

#dragons, #bacons, & #kittens target이 고전적인 예제 문서에서와 어떻게 비슷합니까?