如何使用 CSS 使元素粘在頁面的底部和頂部

Question

我想使一個元素具有粘性，以便它在用戶滾動過去時“粘”到頁面頂部，並在用戶滾動到頁面底部之前“粘”到頁面底部。

我了解如何以一種方式使其具有粘性，但不能兩者兼而有之

Answer 1

我通過稍微增加這個解決方案自己找到了答案

HTML（未更改）：

BEFORE
<div class="hold">
  <div class="item">
    THING
  </div>
</div>
AFTER

CSS：

.hold {
  position: relative;
  margin-top: -2000px;
  margin-bottom: -2000px; /* Added this line */
  pointer-events: none;
}

.hold:before {
  content: "";
  display: block;
  height: 2000px;
}

/* Added the following block */ 

.hold:after {
  content: "";
  display: block;
  height: 2000px;
}


.item {
  pointer-events: initial;
  position: sticky;
  top:0; /* Made this addition */
  bottom: 0;
  z-index: 100;
}