Javascript div元素相对于窗口固定，但仅限于其父元素

我试图以相对于窗口的固定方式定位一个框，但仅限于站点的某个部分。您可以在我创建的JSFIDLE中更容易地看到这一点

我的元素（黄色框）需要保留在屏幕上的位置。它确实做到了这一点。但是包装器元素（蓝色框）的高度为20em。当屏幕滚动超过这个范围时，固定元素继续留在屏幕上，并从包装器中取出。我如何确保它不会超过一个特定点（例如，在19 em之后或填充的起始点或包装的边框等），并随着滚动的进行而开始从屏幕上消失？ 我已经搜索了一个答案，但我所有的搜索查询都被理解为“保持元素相对于其父元素的固定”。确实，当固定元素达到某个点时，我希望它不再相对于窗口固定，而是相对于其父元素固定，但很明显，它不是同一件事

提前感谢您的回答

以下是来自JSFIDLE的代码：

HTML

---

您可能正在寻找的是

位置：sticky

。查看MDN文档，了解如何使用它

记住，浏览器本身不太支持它

---

很明显，你可以用其中一个多边形填充来填充它。示例-

您可能正在寻找的是

位置：sticky

。查看MDN文档，了解如何使用它

记住，浏览器本身不太支持它

---

很明显，你可以用其中一个多边形填充来填充它。示例-

你是说这个吗？-是的，这就是我要找的。谢谢，你是说这个吗是的，这就是我要找的。非常感谢。

<div class="wrapper">
    <div class="fixedElement">
        <p>This should stay fixed on screen but shouldn't go lower than its parent</p>
    </div>
</div>
<div class="enlargingPage"></div>

.wrapper {
    background-color: blue;
    padding: 2em;
    left: 50%;
    top: 50%;   
  height: 20em;
}

.fixedElement {
  background-color: yellow;
  position: fixed;
}

.enlargingPage {
  background-color: gray;
  height:30em;
}