Question

我有三列，每列都有很多块。滚动时，每列中的第一个块应固定在顶部。当您向下滚动到每列的底部时，第一个块应该消失，当您向上滚动并点击列的底部时，应该再次修复第一个块。

任何人都可以帮助我。我正在使用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/

每列中有顶部块的三列仅在列内部滚动时固定

1 个答案: