我的粘性标头不起作用，为什么这样？

Question

对于一个学校项目，我需要建立一个站点。所需的东西之一是标题，最好是粘性的。我去了w3schools，并找到了它的教程，并将其放在了我的项目中，但是，标题肯定不固定。经过大约一个小时的搜索，我放弃了。你们其中一个可以帮我吗？ （我只是一个刚开始的高中计算机科学的孩子，我的代码不是那么出色或其他）

我已经尝试更改我已经拥有的代码的ID和类。而且我试图寻找错误，但是没有成功。

HTML

<header class="header" id="myHeader">
  <h1>My Page</h1>
</header>

CSS

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

#openNav{
    text-align: left
}

Javascript

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");
  }
}

因此，标题存在并且看起来像标题，唯一的是；它根本不粘。

Answer 1

如@blex所述，提供的代码似乎有效。无论如何，我只想指出，您也可以仅使用css属性position: fixed来制作没有任何JavaScript的粘性标头。

.header {
  position: fixed;
  top: 0px;
  height: 40px;
}
这里是功能齐全的codepen example。

Answer 2

已解决，我自己：））