双向“粘性”位置（“固定”时的工作方式） [英] bidirectional "sticky" position (how it is working when "fixed")

问题描述

• 在第一张图片上，当滚动到达父元素时，粘性元素粘在屏幕底部（如预期）


• 在第二张图片上当滚动条使粘性元素居中时，它不会停留在任何地方


• 第三张图片上的滚动条时，粘性元素会粘在屏幕顶部（如预期）

这是我的问题：

• 我知道当粘性元素到达其在视口上的位置时，粘性位置会切换到 position：fixed


• 在第二张图片上，绝对不是这种情况，因为粘性元素不会粘屏幕的顶部和底部都不是


• 为什么粘性元素在第二张图片上到底在做什么？

.parentSticky {
    width: 50%;
    height: 800px;
    border: solid black 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}
.siblingSticky {
    width: 100%;
    height: 100px;
    background-color: orange;
    border: solid 10px red;
    display: inline-block;
    flex: 50 0 1px;
    box-sizing: border-box;
}
.Istick {
    flex-grow: 1;
    border: solid 10px green;
    box-sizing: border-box;
    position: sticky;
    bottom: 10px;
    top: 10px;
}

<!-- break tags illustrate the page's other contents (scrolling demo) -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



<div class="parentSticky">
    <div class="siblingSticky"> Element  </div>
    <div class="siblingSticky Istick" > "Sticky" element </div>
    <div class="siblingSticky"> Element </div>
</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

推荐答案

您忘记了关于粘性的重要部分，即：

You forget an important part about sticky which is:

粘性放置的元素是其计算的位置值为粘性的元素。将其定位为相对，直到其包含的块超过指定的阈值 ^ref

因此，在第二张图片中，粘性元素的行为如下相关元素。

So in the second picture the sticky element is behaving as relative element.

要使用简单的单词，sticky元素仅在由于滚动而隐藏在屏幕上时才会表现为粘性，在这种情况下，sticky行为将强制执行保持可见。如果它已经可见（如第二张图片所示），则不需要任何粘性行为，并且该元素的行为就像设置了 position：relative 一样。

To use simple words, the sticky element will behave as sticky only if it becomes hidden from the screen due to the scroll and in this case the sticky behavior will force is to remain visible. If it's already visible (like in your second picture), no need any sticky behavior and the element will behave as if it has position:relative set.

top / bottom 仅用于定义偏移量。

top/bottom are simply used to define the offsets.

有关更多详细信息的问题：

Related questions for more details:

为什么当元素包装在另一个元素中时，position：sticky不能正常工作？

为什么位置为：粘滞的元素不会粘在父级的底部？

什么是滚动框？

这篇关于双向“粘性”位置（“固定”时的工作方式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！