javascript - 如何保持标题静态，滚动时始终位于顶部？

Question

我将如何防止我的 header 与页面的其余部分一起滚动？我考虑过使用 frame-sets 和 iframe，只是想知道是否有更简单、更用户友好的方法，这样做的最佳做法是什么？

Answer 1

注意:此答案可追溯到 2010 年。考虑 2021 年的 position: sticky，如 another answer 中所述.

---

在包含标题的 div 上使用 position: fixed，例如

#header {
  position: fixed;
}

#content {
  margin-top: 100px;
}

在此示例中，当 #content 从 #header 下方 100px 开始时，但随着用户滚动，#header 保持原位。当然，不用说，您需要确保 #header 具有背景，以便当两个 div 重叠时其内容实际上是可见的。在这里查看 position 属性:http://reference.sitepoint.com/css/position