javascript - 如何创建固定标题(不是粘性标题)，但内容在 JS 中位于标题后面？

Question

我引用了以下文章以获取粘性标题 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header

可是我不想

<div class="top-container">
  <h1>Scroll Down</h1>
  <p>Scroll down to see the sticky effect.</p>
</div>

在我的 html 中。

我需要的是，“我的页眉”始终位于顶部，但是当用户滚动内容时，顶部多余的旧内容应该位于“我的页眉”后面。

我在 myHeader div 下添加了 position:fixed，但我认为这不是修复的正确方法。 如果我这样做它确实有效，但对于类似的网页它不起作用。 我想添加位置适用于这种情况，因为这是网页中的示例。

请帮忙。

Answer 1

您可以通过对您使用的引用中的 javascript 代码进行小的调整来实现您想要的。用以下内容替换 html 页面中的 javascript 代码，它将按照您希望的方式工作。

<script>
window.onscroll = function() {myFunction()};

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

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