javascript - 三列，每列中的顶部 block 仅固定在列内滚动

Question

我有三列，每列中有许多 block 。滚动时，每列中的第一个 block 应固定在顶部。当您向下滚动到每一列的底部时，第一个 block 应该消失，当您向上滚动并到达列底部时，第一个 block 应该再次固定。

谁能帮帮我。我正在使用 Vanilla JS

{
var stick = document.querySelectorAll(".stick");

  window.onscroll = function() {
    stickIt();
  };

}

function stickIt() {
  for (var i = 0; i < stick.length; i++) {
    var sticky = stick[i].offsetTop;
    if (window.pageYOffset >= sticky) {
      stick[i].classList.add("sticky");
    } else {
      stick[i].classList.remove("sticky");
    }
  }
}

header{
  height:300px;
  background:#ccc;
}
.block.stick {
  background: #333;
}
.block {
  height: 200px;
  background:#ccc;
}
section{
  height:1000px;
  background:#999;
}
.sticky {
  position: fixed;
  top: 0;
  z-index:1;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/4.1.2/css/foundation.css">
<header></header>
<div class="row"> 
  <div class="small-4 columns">
    <div class="stick block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="small-4 columns">
    <div class="stick block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="small-4 columns">
    <div class="stick block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>
<section></section>

Answer 1

我建议您看一下 CSS Flexbox。仅使用 CSS 就可以实现 99% 的目标。获得布局后，它就像根据滚动位置切换父级上的类一样简单。

看看这篇很棒的文章。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/