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中。

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

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

请帮忙。

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>

我如何创建一个固定的标题（不是粘性标题），但内容落在JS的标题后面？

1 个答案: