skrollr經典示例頁腳

我想教自己正確使用Skrollr插件，我主要關注文檔中列出的經典示例。（http://prinzhorn.github.io/skrollr/examples/classic.html）。skrollr經典示例頁腳

我的問題是我的頁腳沒有出現在頁面的底部，而是出現在我的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; 
    }

來源

2014-10-06 fred

把腳部構件內#skrollr-body。爲了使所有工作都能在桌面/移動設備上運行，將存在於#skrollr-body以外的唯一主體內容是您的固定位置控件和parallax-image-wrapper & parallax-image集的屬性。

如果你需要額外的「固定」的定位在您的佈局元素，你需要列出這些外#skrollr-body設置在div一個data-anchor-target屬性，然後調用#ID你在哪裏，你需要的#skrollr-body下創建該目標它來顯示。

就像他們如何處理#dragons，#bacons，& #kittens經典示例文檔中的目標。

來源

2014-10-19 07:37:52 lsargent

skrollr經典示例頁腳

回答

相關問題