如何使用CSS使元素同时粘贴到页面的底部和顶部

Question

我想让一个元素变得粘稠，如果用户滚动过它，它会“粘”到页面的顶部，在用户滚动到它之前，它会粘到页面的底部。

我知道如何使它粘稠，但不是两者兼而有之。

Answer 1

我自己通过稍微增加this solution找到了答案

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;
}