我正試圖設(shè)計(jì)一個(gè)使用網(wǎng)格突破布局的網(wǎng)站。我想做一個(gè)響應(yīng)式的列，監(jiān)聽并響應(yīng)滾動(dòng)事件之類的事件。我想我已經(jīng)基本搞清楚了，但是我不能讓我的網(wǎng)格響應(yīng)滾動(dòng)，就像在vrarlesfestival.com的首頁(yè)上發(fā)生的那樣。如果你能看到當(dāng)你滾動(dòng)時(shí)，帶有菜單按鈕和大文本字母的欄是如何移動(dòng)的，那就是我想做的。

我想我可以用CSS:before & gt；content '函數(shù)，為每個(gè)字母設(shè)計(jì)成單獨(dú)的HTML子類？

然后，當(dāng)你滾動(dòng)時(shí)移動(dòng)的條，到目前為止我只有條。我不知道如何在真正向下滾動(dòng)整個(gè)窗口之前，讓滾動(dòng)動(dòng)作將它的高度降低到某一水平。

這些是我此刻所在位置的HTML和CSS片段...

.edge-panel {
  background-color: #eee;
  width: 20%;
  height: 301.5vh;
}

.menu-bar {
  background-color: #23252b;
  width: 30%;
  height: 75vh;
  position: sticky;
  margin-left: 70%;
  margin-top: 150px;
  top: 0;
  transform: translateX(30%);
  transition: height 1s ease-in-out;
}

.menu-bar:hover {
  border: 5px solid #eee;
  transition: .2s ease-in-out border;
}

<div class="edge-panel">
  site name here
  <div class="menu-bar">
    menu here
  </div>
</div>