我的粘性 header 不起作用，这是为什么？

Question

对于一个学校项目，我需要建立一个网站。需要的东西之一是 header，最好是粘性的。我去了 w3schools 并找到了它的教程，我把它放在我的项目中，但是，header 肯定不会坚持。经过大约一个小时的搜索，我放弃了。也许你们中的一个可以帮助我吗？（我只是一个刚上高中计算机科学的孩子，我的代码不是那么出色）

我已经尝试更改我已有代码的 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");
  }
}

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

Answer 1

自己解决了 :))

不小心将脚本标签放在 <head> 而不是 <body>

Answer 2

如@blex 所述，提供的代码似乎有效。不管怎样，我只是想指出，你也可以在没有任何 javascript 的情况下制作粘性 header，只需使用 css 属性 position: fixed.

.header {
  position: fixed;
  top: 0px;
  height: 40px;
}

这是一个功能齐全的 codepen example。

我的粘性 header 不起作用，这是为什么？

My sticky header is not working, why is this?

html

javascript

css

sticky