Question

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

我的网站已经包含内容和页脚的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;
}

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

任何帮助将不胜感激。谢谢。

编辑： 这不是重复的问题，因为我想要的是css解决方案，并且此标记的答案使用粘滞横幅解决了我的问题。

Answer 1

您想要的是拥有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;
}

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

Answer 2

是的，它很容易做到

您可以做的是，向javascript注册页脚，当页脚出现在用户视口中时调用该功能，请检查此帖子，

How to Check if element is visible after scrolling?

当页脚显示在视口中时，将横幅的显示显示为：none，使用css；当页脚离开视口时，将显示视线变为阻塞，或其他任何操作

如何使粘性横幅保持在页脚上方？

2 个答案: