Question

目前有三张图片显示在彼此之下。我使用Sticky-Kit将顶部图像保持在原位，而其余部分则滚动到视图中我想要实现的目的是将图像保持在顶部之下，直到它们到达第一张图像的底部。换句话说，只有一个图像可见，而下一个图像在滚动时从底部到顶部覆盖它。不知道如何最好地接近这一点。

进一步细分我想要实现的目标：

1）滚动直到＃pic1在视口中居中，此时它会“粘住”＃9。滚动继续。

2）当用户继续滚动时，＃pic2开始从＃pic1的底部升起，直到它完全覆盖＃pic1。在此之前，只有＃pic1可见。

3）当＃pic2完全覆盖＃pic1时，＃pic3从底部出现以覆盖＃pic2

＆＃13;

$(document).ready(function() {
  var $ = jQuery.noConflict();
  
  $("#text").stick_in_parent({offset_top: 90});
  $("#pic1").stick_in_parent({offset_top: 90});
  $("#pic2").stick_in_parent({offset_top: 90});
  $("#pic3").stick_in_parent({offset_top: 90});
});

＆＃13;

#text {
  width:40%;
  float:right;
  background-color:white;
  height:500px;
  padding-top:173px;
  padding-left:50px;
}

#pic1 {
  position:relative;
  width:60%;
  height:500px;
  background-color:green;
}

#pic2 {
  position:relative;
  width:60%;
  height:500px;
  background-color:red;
}

#pic3 {
  position:relative;
  width:60%;
  height:500px;
  background-color:blue;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>

<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 id="text" class="p2">
  <h2 id="bluetooth-header" class="header-title"><span>HEADER</span></h2>
  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.nd enjoy your newly curated playlist from the palm of your hand.
</div>

<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>

＆＃13;

＆＃13; codepen.io/anon/pen/JbQZwN

滚动时在另一个上方显示图像

0 个答案: