只在網站的某一部分貼緊部分

Question

我見過很多網站最近都納入了從部分到部分的滾動，如fullpage.js，我正試圖在頁面的僅一部分上實現此目標，如此頁wedding party app。是否有人知道我怎麼能做到這一點？我沒有找到能夠幫助我重新創建iPhone的捕捉部分的東西，所以我沒有運氣....我會製作自己的動畫。

Answer 1

這是很容易

HTML

<div id="skrollr-wrapper"> 
    <div id="box1">box1</div> 
    <div id="box2">box2</div> 
</div> 

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script> 

CSS

body { 
    padding: 0; 
    margin: 0; 
    background: #fff fixed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEX4+Pj09PQf/c7fAAAAGklEQVR4Xq3MIQEAAADDIPqX/kvMIMEWEm8O7b0/wewc/NcAAAAASUVORK5CYII=) repeat; 
} 

#skrollr-wrapper { 
    /* make sure the boxes stay in place while you 
    scroll by wrapping them in this fixed div: */ 
    width:100%; 
    height:100%; 
    position:fixed; 
    overflow: hidden; 
} 

#skrollr-wrapper div { 
    position: absolute; 
    overflow: hidden; 
    text-align: center; 
} 

#box1 { 
    background: blue; 
    margin: auto; 
    top: 0; left: 0; right: 0; bottom: 0; 
} 

#box2 { 
    background: red; 
    height: 100px; 
    width: 100%; 
    margin-top: 50px; 
} 

jQuery的

// setSkrollr function extracted from https://www.pingdom.com/2013/ 
var setSkrollr = function($el, data) { 
    for (var i = 0, l = data.length; i < l; i++) { 
     var d = data[i], 
      px = d[0]; 
      css = d[1]; 
     $el.attr('data-' + px, css); 
    } 
} 

jQuery(function($) { 
    setSkrollr($('#box1'), [[0, 'width:100%'], [1500, 'width:0%']]); 
    setSkrollr($('#box2'), [[0, 'transform:translateX(-100%)'], [750, 'transform:translateX(100%)'], [1500, 'transform:translateX(-100%)']]); 

    skrollr.init({ 
     smoothScrolling: false 
    }); 
});