修复屏幕底部的元素，但前提是父容器尚未结束？

Question

假设我有一个元素，它在视觉上是容器的一部分。这个容器的高度可以很长。

现在，当用户向下滚动时，我想将此元素放置在屏幕的底部。但是当容器在某个时刻结束时，我希望元素保留在该容器的底部并且不再向下滚动。

所以再一次：当容器还没有结束时，元素位于屏幕的底部：

...但是当我继续滚动时，它停在容器内：

我有点被困在这里了。当元素位于容器内部的顶部时，我确实知道如何执行此操作。向下滚动只会使其停在底部。

问题似乎在于，要么元素将被移动到文档流之外，因此它不会保留在容器内，要么它将始终位于容器的底部，因此该元素不会“不随用户滚动并保持在屏幕的底部。

有什么想法吗？

<div className="mx-20 my-36">
    <div className="bg-slate-200 h-[1200px] w-full relative border-2 border-black relative">
        <div className="fixed bottom-0 left-0 right-0 p-2 bg-white w-full border-2 border-red-600">Element</div>
    </div>

    <div className="my-12">

        The page continues here but the element remains in the container ...
    </div>
</div>

PS：这里使用顺风和反应，但也欢迎任何普通CSS！我很想在没有 JavaScript 的情况下解决这个问题。

Answer 1

在两个元素周围创建一个父 div。将除高度之外的所有样式移至此父级。
将
2. fixed

    切换为 

   sticky
您可以删除
3. relative

    - 它不再做任何事情

<div className="mx-20 my-36">
  <div className="bg-slate-200 border-2 border-black w-full">
    <div className="h-[1200px]">
    </div>
    <div className="sticky bottom-0 left-0 right-0 p-2 bg-white w-full border-2 border-red-600">Element</div>
  </div>

  <div className="my-12">
    The page continues here but the element remains in the container ...
  </div>
</div>

演示：

https://play.tailwindcss.com/gy71xPcjnR

Answer 2

从技术上讲，您的问题就是您的解决方案。 Position: Sticky 只会保留在父元素内。解决此问题的最佳方法是将父元素放置在您希望粘性滚动的所有对象周围。如果这不起作用，您可以使用 jquery 或 javascript 编写一个脚本，其中显示“当视口滚动到此位置时，然后将position:fixed 添加到此元素”

Position: Sticky 使元素出现在父容器的顶部，然后滚动到固定位置（字面意思类似于position:fixed）的所有其他元素，直到父容器的末尾。

要完成这项工作，您需要：

在您希望粘性项目首次出现的位置启动一个父容器
包含您希望粘性对象在父容器内
2. 滚动的所有项目
在您希望粘性对象停止的位置结束父容器

这是关于它的另一篇文章：

CSS：进入视口时粘在底部

.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  width: 100vw;
  background: yellow;
}

<!-- Content you want before the sticky element -->
<div>
  <div style="height: 300px; background: red;">Scroll</div>
  <div style="height: 300px; background: orange;"></div>
</div>

<!-- Content you want after the sticky element -->
<div>
  <!-- The sticky element will appear as if its been placed here -->
  <div style="height: 300px; background: green;"></div>
  <div style="height: 300px; background: blue;"></div>
    <div style="height: 300px; background: red;">Scroll</div>
  <div style="height: 300px; background: orange;"></div>
    <div style="height: 300px; background: red;">Scroll</div>
  <div style="height: 300px; background: orange;"></div>
    <div style="height: 300px; background: red;">Scroll</div>
  <div style="height: 300px; background: orange;"></div>
  <div class="sticky">Sticky Section</div>
</div>

如果你想走 jquery 路线...

$(document).scroll(function() {
  var viewportPlacement = $(window).scrollTop() + $(window).height(); //finds the height of the bottom of the viewport
  var initialSticky = $('.sticky').prev().height() + $('.sticky').height(); //finds the initial placement of the sticky element, plus the height of the element so the whole thing has to scroll into view for the fixed position to be added
  if (viewportPlacement >= initialSticky) { //if the bottom of the viewport has the whole sticky element in it
    $('.sticky').css('position', 'fixed') //then add position fixed to it
  } else if (viewportPlacement < initialSticky){ //else if the initial placement of the sticky element is below the viewport
    $('.sticky').css('position', 'static') //remove the position fixed
  }
})

.sibling {
    background-color: lavender;
    height: 150vh;
}

.sticky {
    background-color: pink;
    box-sizing: border-box;
    border: 1px solid fuchsia;
    position: static;
    padding: 20px;
    width: 100%;
    bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sibling"></div>
<div class="sticky">Hello World</div>
<div class="sibling"></div>

Answer 3

我遇到了类似的问题，但它位于屏幕顶部。你说你知道如何在顶部做到这一点，你能与我分享解决方案吗？