使右下角固定元素高于页脚

Question

我想知道，一旦页面到达页脚，我如何才能使我固定在屏幕右下角的 div 变得不固定。

例如，如果我的 html 是：

<div class="main" />
<div class="fixed" />
<div class="footer" />

我的 CSS 是：

.main {
    height: 100vh;
    background-color: aqua;
    width: 100vw;
}

.fixed {
    background-color: green;
    height: 200px;
    position: fixed;
    bottom: 0px;
    width: 200px;
}

.footer {
    background-color: brown;
    height: 300px;
    width: 100vw;
}

我想将我的固定 div 放在底部，直到页脚开始显示，然后让它在页脚顶部滚动​​。我应该使用粘性定位吗？如果是这样，我该怎么做？如果没有，有更好的解决方案吗？ 谢谢。

Answer 1

您可以使用position: sticky 和bottom: 0 将其粘贴到视口底部（回答您的如何问题）。因为它的非粘性位置就在页脚之前，所以当视口到达那里时它会自然地休息。

body {
  font-weight: bold;
  font-size: 24px;
  padding-bottom: 300px;
}

main * {
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
}

.content {
  min-height: 1000px;
}

.sticky {
  position: sticky;
  /* the important part - stick to the bottom */
  bottom: 0;
  border: 1px solid red;
  background-color: white;
}

<main>
  <div class="content">content</div>
  <div class="sticky">I'm sticky</div>
  <footer>footer</footer>
</main>

话虽如此，正如 Will 在评论中提到的那样 - 你应该使用它吗？这取决于您支持的浏览器。如果您需要支持较旧的浏览器，则需要备用和/或 JavaScript 来处理定位。