[分享]css不用sticky实现吸顶容器

在前端开发中，经常会遇到需要实现一个区域在滚动时始终保持在屏幕顶部的需求，这个效果通常被称为“吸顶容器”。而实现吸顶容器的方法有很多种，其中比较常见的一种是使用CSS中的:fixed属性。不过如果想要...

在前端开发中，经常会遇到需要实现一个区域在滚动时始终保持在屏幕顶部的需求，这个效果通常被称为“吸顶容器”。而实现吸顶容器的方法有很多种，其中比较常见的一种是使用CSS中的position:fixed属性。不过如果想要实现一个不依赖于position:fixed的吸顶容器，该怎么做呢？
使用CSS中的position:sticky属性可以让一个元素在滚动到一定位置时停止滚动并保持在屏幕顶部。不过目前该属性并不被所有的浏览器都支持，因此在实际开发中需要考虑兼容性问题。那么有没有其他方法可以实现吸顶容器呢？
一种比较简单的方法是利用CSS中的transform属性结合JavaScript中的scroll事件来实现。具体做法是，为需要实现吸顶容器的元素添加一个transform:translateY(-100%)的样式，将元素从视图上移出去。然后在JavaScript中监听scroll事件，当滚动距离大于等于元素距离顶部的距离时，将元素的transform属性设置为transform:translateY(0)，让元素回到视图中。这样可以实现一个类似吸顶容器的效果，而且兼容性也比较好。
以下是示例代码：

<style>
  .sticky-container {
    height: 100px;
    background-color: #ccc;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
  }
</style>
<br>
<div class="wrap">
  <div class="sticky-container">
    <p>我是要吸顶的内容</p>
  </div>
  <p>其他内容</p>
  <p>其他内容</p>
  <p>其他内容</p>
  <p>其他内容</p>
  ...
</div>
<br>
<script>
  var stickyContainer = document.querySelector('.sticky-container');
  var distanceToTop = stickyContainer.getBoundingClientRect().top;
<br>
  window.addEventListener('scroll', function() {
    if (window.scrollY >= distanceToTop) {
      stickyContainer.style.transform = 'translateY(0)';
    } else {
      stickyContainer.style.transform = 'translateY(-100%)';
    }
  });
</script> 

需要注意的是，这种方法有一个小问题，在某些情况下即将到达目标位置时会发生元素“跳跃”的情况。这是因为在scroll事件中设置transform属性时可能会有延迟，导致元素的位置先往回移了一段距离再回到目标位置。不过这个问题并不影响功能，可以通过调整元素高度或调整transition的时间来减少影响。
总的来说，使用transform和scroll事件结合的方式可以实现一个不依赖于position:fixed的吸顶容器，并且兼容性比较好。如果你遇到了类似的需求，可以尝试使用这种方式来实现。