如何在一定的滚动周期内使HTML部分的位置固定？

Question

HTML结构类似于：

<header> ..content </header>
<section class="sec-1"> ..content </section>
<section class="sec-2"> ..content </section>
<section id="sec-3">
  <div class="item-1" style="opacity:1"> <img src="exm.jpg" alt=""> </div>
  <div class="item-2" style="opacity:0"> <img src="exm.jpg" alt=""> </div>
  <div class="item3" style="opacity:0"> <img src="exm.jpg" alt=""> </div>
</section>
<section id="sec-4"> ..content </section>
<section class="sec-5"> ..content </section>
<footer> ..content </footer>

当#sec-3像http://prntscr.com/c97u0z一样出现在底部时，页面滚动将在#sec-3中.item-1的相同位置显示.item-2，.item-3，我的意思是在底部。然后像往常一样滚动页面到#sec-4。

我试过这样做：

function getId(element) {
  return document.getElementById(element);
}

function scroll_effect() {
  var yPosition = window.pageYOffset,
    targetPos = getId('sec4').offsetTop - screen.availHeight;
  if(yPosition > targetPos) {
    $('.item-2').css('opacity', '0');
    $('.item-1').css('opacity', '1');
    $('.item-3').css('opacity', '0');
  }
  if(yPosition > targetPos + getId('sec3').offsetHeight - (getId('sec3').offsetHeight / 2)) {
    $('.item-2').css('opacity', '1');
    $('.item-1').css('opacity', '0');
    $('.item-3').css('opacity', '0');
  }
  if(yPosition > targetPos + getId('sec3').offsetHeight) {
    $('.item-2').css('opacity', '0');
    $('.item-1').css('opacity', '0');
    $('.item-3').css('opacity', '1');
  }
}
window.addEventListener("scroll", scroll_effect);

它在#sec-4中更改了内部项.item-1、.item-2、.item-3，但我不知道如何在页面滚动中更改内部项时将#sec4放在底部。

仅供参考，当从下到上滚动保持相同的方式时，也应该发生反转。

Answer 1

如果你想把#se4放在页面的底部，只需通过jQuery修改它的CSS属性。如果您想要将另一个部分固定到底部，则将其删除

#se4 {
  position: fixed;
  bottom: 0;
}

Answer 2

您可以尝试在css中使用overflow参数。为sec-3添加width: 500px;height: 500px;overflow: scroll;。这个方法不需要任何javascript代码。

    <section class="sec-1">
    ..content
</section>
<section class="sec-2">
    ..content
</section>
<section id="sec-3" style="width: 500px;height: 500px;overflow: scroll;">
    <div class="item-1" style="opacity:1">
        <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt="">
    </div>
    <div class="item-2" style="opacity:1">
        <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt="">
    </div>
    <div class="item3" style="opacity:1">
        <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt="">
    </div>
</section>
<section id="sec-4">
    ..content
</section>
<section class="sec-5">
    ..content
</section>