仅在页面底部添加边距

Question

我有一个始终固定在视图底部的 cookie 部分。

<section id="cookie-section">
    <span id="cookie-text">Bla bla bla</span>
</section>

#cookie-section {
    min-height: 50px;
    width: 100%;
    position: fixed;
    display: flex;
    bottom: 0;
        background-color: rgba(38, 38, 38, 0.9);
}

但是当你滚动并到达页面底部时，我想为其添加 50px 的 margin-bottom 。我该怎么做？

当你只是添加

margin-bottom: 50px;

到它时，它已经在开始时获得了我不想要的边距。仅当您滚动到达页面底部时。

Answer 1

可以使用滚动驱动动画，但支持还不好。

您可以使用 Google Chrome 测试以下内容

#cookie-section {
  min-height: 50px;
  inset: auto 0 0;
  position: fixed;
  display: flex;
  background-color: rgba(38, 38, 38, 0.9);
  color: #fff;
  animation: margin 2s;
  animation-timeline: scroll(root)
}

@keyframes margin {
  0%,90% {margin-bottom:0;}
  100% {margin-bottom:50px;}
}

body {
  min-height: 300vh;
}

<section id="cookie-section">
  <span id="cookie-text">Bla bla bla</span>
</section>