如何在响应 bootstrap-4 时更改粘性行为

Question

我在我的项目中使用 angular 和 bootstrap。我有一个 header，它由两个部分和一个内容区域组成。当分辨率较小时，header 换行。

Header and content on large screens

Header and content on small screens, wrapped

<div class="sticky row">
  <div class="col-md-7" style="height: 50px; background-color: seagreen;">
    Header A
  </div>
  <div class="col-md-5" style="height: 50px; background-color: skyblue;">
    Header B
  </div>
</div>
<div style="height: 1500px; width: 100%; background-color: slategray;">
  any content<br />
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

我还设置了 header 粘性，以便我的内容在 header 下方流动。

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px;
}

如您在此 Stackblitz 中所见，这工作正常： https://stackblitz.com/edit/angular-bootstrap-responsive-sticky

但对于小屏幕，我希望 Header B 也滚动到 Header A 下方并且不粘。由于 Header A 和 Header B 合二为一 div 我不知道有没有办法做到这一点，同时，我想保留header.

感谢任何想法:)

Answer 1

您可以 hide/show div 使用 bootstrap 4 格属性。请检查以下代码：

<div class="sticky row">
  <div class="col-md-7" style="height: 50px; background-color: seagreen;">
    Header A
  </div>
  <div class="d-none d-md-block col-md-5" style="height: 50px; background-color: skyblue;">
    Header B
  </div>
</div>
 <div class="d-block d-md-none" style="height: 50px; background-color: skyblue;">
    Header B
  </div>
<div style="height: 1500px; width: 100%; background-color: slategray;">
  any content<br />
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

Answer 2

对于大屏幕，我将页眉比例设置为 6:4。第一个 division 默认为粘性，第二个 div 仅对大屏幕具有粘性。

HTML :

<div class="custom-col-6 sticky" style="height: 50px; background-color: seagreen;">
  Header A
</div>
<div class="custom-col-4" style="height: 50px; background-color: skyblue;">
  Header B
</div>

CSS :

.custom-col-4,
.custom-col-6 {
  width: 100%;
  display: inline-block;
}

@media (min-width: 768px) {
  .custom-col-6 {
    width: 60%;
  }
  .custom-col-4 {
    width: 40%;
    position: sticky;
    top: 0;
  }
}

演示：https://stackblitz.com/edit/angular-bootstrap-responsive-sticky-2aprb3?file=src/app/app.component.css

如何在响应 bootstrap-4 时更改粘性行为

How to change sticky behavior when responsive with bootstrap-4

css

sticky

bootstrap-4

responsive

angular