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

仅在网站的一个部分上捕捉部分

1 个答案: