正如标题所暗示的，我试图以模拟在尤伯杯的网站上滚动效果。我目前使用的ScrollMagic库，试图做到这一点，我几乎都有，但需要一些帮助，得到它的休息的方式。
见他们的滚动效果演示在这里：http://i.imgur.com/W3QLV7T.gif
您可以从gif看到有三个部分。右边的部分是独立滚动，但是手机的图像保持固定。该手机与网页一起滚动唯一的一次，当用户滚动过去的第一和第三节。
我想“取消固定”的形象，并结束与测试3部分触发，并将它与它一起向上滚动，但我还没有成功。我的图像落在底部部分下。我如何去在正确的现场释放图像正确地模拟了预期效果？
我稍微修改您的jsfiddle的标记，干涸的JS，并添加了一些律CSS。
(function($) {
var imageSel = '#pinImg';
var sectionsSel = '#start aside > section';
var pinStart, pinEnd, pinDuration;
varsInit();
var controller = new ScrollMagic.Controller({
addIndicators: true
});
var scenes = [
new ScrollMagic.Scene({
triggerHook: 0.05,
triggerElement: imageSel,
duration: pinDuration
})
.setPin(imageSel)
];
scenes = scenes.concat( createScene(sectionsSel) );
controller.addScene( scenes );
function varsInit() {
// var afterMargin = 30;
var sectionCount = 3;
pinEnd = $( $(sectionsSel).get(sectionCount - 1) ).offset().top;
// pinStart = $(imageSel).offset().top - afterMargin;
pinDuration = pinEnd;
}
function createScene(sel) {
var sceneList = [];
$(sel).each(function(index, elem) {
var focusClass = 'imageSel--'+ index;
sceneList.push(
new ScrollMagic.Scene({
triggerHook: 0,
triggerElement: elem,
offset: -30,
duration: ($(elem).outerHeight()+30)
})
.on('enter', function(e) {
$(imageSel).addClass(focusClass);
})
.on('leave', function(e) {
$(imageSel).removeClass(focusClass);
})
);
});
return sceneList;
}
})(jQuery);/* Bootstrap Override */
/* =================== */
.row {
display: table;
margin-bottom: 0;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
/* Bootstrap Override END */
/* ======================= */
.scrollmagic-pin-spacer {
display: inline-block !important;
}
#start { min-height: 400vh; }
#start aside > section:first-child{ margin-top: 50%; }
#start aside > section .row { padding-bottom: 50%; }
#start aside > section:last-child .row { padding-bottom: 0; }<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<div class="row">
<div class="col-sm-12 jumbotron">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
<div id="start" class="container">
<div class="row">
<div class="col-sm-6">
<img id="pinImg" src="https://placehold.it/300x200">
</div>
<aside class="col-sm-6">
<section>
<div class="row">
<div id="test1" class="col-sm-12 well">
<h3>
Test 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</section>
<section>
<div class="row">
<div id="test2" class="col-sm-12 well">
<h3>
Test 2
</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
</div>
</section>
<section>
<div class="row">
<div id="test3" class="col-sm-12 well">
<h3>
Test 3
</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</section>
</aside>
</div>
<section>
<div class="row">
<div class="col-sm-12 jumbotron">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-sm-12 jumbotron">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>