如何使粘性横幅停留在页脚上方？

Question

如何使粘性横幅停留在页脚上方？

Bha*_*rat 1 html css

在我的网站中，我必须创建一个政策横幅。

我的网站已经包含内容和页脚的 div。

我想要的是？

我想以一种方式设置这个横幅，它会粘在用户的视口底部（注意：它不应该在页面底部，而应该留在用户的显示底部）。
当用户滚动页面时，横幅应该在滚动时粘在底部，当页脚出现时应该停止。
页脚将保留在页面末尾。

现在，我已经实现的大部分事情，但问题是将页脚保持在底部，横幅滚动应停止在页脚上方。

我的示例代码：

.main-area {
  height: 1000vh;
  background-color: #ccc;
  width: 2000px;    
  position: relative;
}

.policy-banner {
  height: 100px;
  width: 2000px;
  color: yellow;
  background-color: blue;
  position: fixed;
  bottom: 0;
  left: 0;
}

.footer {
  background-color: black;
  height: 50px;
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
</head>
<body>
  <div class="main-area">
    <section>another sections coming dynamically</section>
    <section>another sections coming dynamically</section>

    <div class="policy-banner">
      this is banner, it should stick to the user's view port. 
      when user scroll, it will also scroll but upto footer and should not overlap with footer.
    </div>
  </div>

  <footer class="footer">
    this is footer. it will stay at the end of the page.
  </footer>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

任何帮助将非常感激。谢谢。

编辑： 这不是重复的问题，因为我想要的是 css 解决方案，这个标记的答案解决了我的粘性横幅问题。

Answer 1

Sou*_*low 5

你想要的是拥有position: sticky;而不是fixed. 无需过多赘述，这position: sticky;意味着元素要么表现得像它是相对定位的，直到它满足条件，然后表现得像在满足条件的持续时间内固定。

在下面的示例中，条件是bottom: 0;，因此它将开始固定，因为您从其父 div 开始.main-area，但是一旦您在父 div 之外就停止。

.main-area {
  background-color: #ccc;
}

.main-area .empty {
  height: 500px;
  background-color: #ddd;
}

.policy-banner {
  height: 100px;
  color: yellow;
  background-color: blue;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}

.footer {
  background-color: black;
  height: 50px;
  width: 100%;
  color: white;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
</head>
<body>
  <div class="main-area">
    <div class="empty">Section 1</div>
    <div class="empty">Section 2</div>
    <div class="policy-banner">
      this is banner, it should stick to the user's view port. 
      when user scroll, it will also scroll but upto footer and should not overlap with footer.
    </div>
  </div>

  <footer class="footer">
    this is footer. it will stay at the end of the page.
  </footer>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，7 月前
查看次数：	2862 次
最近记录：	6 年，7 月前