javascript - 基本 HTML 白色方形标题 Bug 主页

Question

我通过研究和复制+粘贴这个固定的 Headertitle 来构建，但不幸的是，我在加载侧面并向上滚动后遇到了一个问题，有一个空白区域，标题跳入然后跳回。谁能帮我解决这个 Bug？

它 super 烦人……我几乎尝试了所有方法来删除它。

我希望我的标题固定在一个点上并留在顶层，这就是为什么我也把 zindex -999

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

body 
  margin: 0;
  font-family: Impact;z-index: 999;
}

.top-container {
  position: absolute;
  text-align: center;
  background: #transparent;
  color: #transparent;
  z-index: 999;
}

.header {
  position: auto;
  padding: auto, auto;
  text-align: center;
  background: #transparent;
  color: #transparent;
  z-index: 999;
}

.content {
  padding: 10px;
  z-index: 999;
}

.sticky {
  position: fixed;
  text-align: center;
  top: 0;
  z-index: 999;
  width: 100%;
}

.sticky + .content {
  position: absolute;
  padding-top: 0px;
  z-index: 999;
}

<div class="header" id="myHeader">
    <h2><center>97cm</center></h2>
</div>

Answer 1

只需添加粘性类并摆脱 javascript

<div class="header sticky" id="myHeader">

---

解释:

您的粘性类设置为将 div“粘贴”到页面顶部，但您实际上并未将此类分配给您的 <div> .

然后你有一些 javascript 检查你是否向下滚动页面并然后分配 .sticky给你上课 <div>

您看到的空白和“跳跃”是您滚动和应用 .sticky 的 javascript 之间的延迟。类(class)。你总是想要这个 </div>粘性，所以只需要 sticky永久分配给它的类，并删除所有 javascript。