Question

我试图以相对于窗口的固定方式放置一个方框，但仅限于网站某个部分的范围内。您可以在我创建的jsfiddle中更容易地将其可视化。

我的元素（黄色框）需要保留在屏幕上的位置。它确实如此。但是包装元素（蓝色框）的高度为20em。当屏幕进一步滚动时，固定元素继续留在屏幕上并离开其包装。如何确保它不会超过特定点（例如，在19 em之后或填充的起始点或包装的边界等）并开始从屏幕上消失为滚动还在继续？我已经搜索了一个答案，但我的所有搜索查询都被理解为＆＃34;相对于其父级＆＃34;保持一个元素是固定的。确实，当固定元素到达某个点时，我希望它不再相对于窗口而是相对于它的父级固定，但它清楚它不是同一个东西。

提前感谢您的回答。

以下是来自jsfiddle的代码：

HTML

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

CSS

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

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

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

Answer 1

您可能正在寻找的是position: sticky。查看MDN文档，了解如何使用它。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

记住浏览器本身不支持它。 http://caniuse.com/#feat=css-sticky

显然，你可以使用其中一种polyfill来填充它。示例 - https://github.com/wilddeer/stickyfill

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

1 个答案: