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

解决了，我自己：））

意外地将脚本标记放在<head>中，而不是<body>

Answer 2

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

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

功能全面的codepen example。

我的标头不起作用，这是为什么？

2 个答案: