时间戳

首页 > 解决方案 > html header 中的 Position Sticky 不起作用，我怎样才能使它起作用？

html - html header 中的 Position Sticky 不起作用，我怎样才能使它起作用？

问题描述

我正在尝试使标题变粘我花了半个小时调试它，有人可以帮我解决吗？

我确定我错过了一些东西，但我无法弄清楚。

这是密码笔。

https://codepen.io/hashir621/full/gORELOo

HTML：

<div class="parent_header">

  <div class="header">

  </div>

</div>

<div class="test_height">

</div>

CSS

.parent_header {
  height: 100px;
}

.header {
  background-color: green;
  width: 100vw;
  height: 100px;

  position: sticky;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}

标签： htmlcss

解决方案

找到下面的代码片段

.header {
  background-color: green;
  width: 100vw;
  height: 100px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}
<div class="header">

</div>



<div class="test_height">

</div>

推荐阅读