正如标题所示，我正在尝试模拟Uber网站上的滚动效果。我目前正在使用ScrollMagic库来尝试实现这一点，我几乎拥有它，但需要一些帮助才能获得其余的方式。
查看滚动效果的演示:http://i.imgur.com/W3QLV7T.gif
你可以从gif中看到有三个部分。右边的部分是独立滚动的，但手机的图像是固定的。只有当用户滚动到第一或第三部分时，手机才会跟随页面滚动。
在这里找到我的JSFiddle尝试。
我试图"解锁"图像，并与测试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>