实现无需固定高度的动态固定头部及滚动吸顶导航栏需求

我来帮你解决这个问题，优先用纯CSS的sticky定位就能完美实现需求，不需要额外JavaScript，而且完全满足头部自适应高度、滚动时被主体覆盖、导航栏吸顶的效果：

这个方案利用CSS原生的position: sticky特性，代码简洁且符合现代浏览器标准，完全适配你的需求。

调整后的完整代码 #

HTML（保持原有结构，补充完整导航项）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="page-header" role="banner">
  <section class="header-content">
    <h1>Fixed Header</h1>
    <p>Praesent non hendrerit sapien.</p>
    <p>Praesent non hendrerit sapien. Vivamus sit amet pellentesque nisl. Maecenas hendrerit elit ut mi porta, sagittis accumsan felis mollis. Fusce ut tincidunt lectus...</p>
  </section>
</header>
<nav class="page-nav" role="navigation">
  <div class="nav-wrapper">
    <div class="nav-brand">
      <a href="/">Brand</a>
    </div>
    <ul class="nav-menu">
      <li class="nav-item nav-active">
        <a class="nav-link" href="">News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
    </ul>
  </div>
</nav>
<main class="page-main">
  <section class="page-content">
    <article class="entry">
      <header class="entry-header">
        <h2>Quisque a dolor vel leo porttitor luctus</h2>
      </header>
      <section class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dolor vel leo porttitor luctus. Donec vel mauris eget nisi ultricies aliquet. Sed auctor, nisl eget aliquam bibendum, neque nunc ultrices nisl, vitae placerat nunc nunc eget nisl. Suspendisse potenti. Nullam nec neque vitae nisl aliquet aliquet.</p>
        <p>Donec vel mauris eget nisi ultricies aliquet. Sed auctor, nisl eget aliquam bibendum, neque nunc ultrices nisl, vitae placerat nunc nunc eget nisl. Suspendisse potenti. Nullam nec neque vitae nisl aliquet aliquet.</p>
        <p>更多测试内容...（可添加足够文本让页面滚动）</p>
      </section>
    </article>
  </section>
</main>

CSS（核心调整部分）

body {
  margin: 0;
  /* 移除原有的padding-top，头部现在处于正常文档流 */
}

.page-header {
  background-color: yellow;
  text-align: center;
  padding: 2em 0;
  /* 移除固定定位、固定高度和z-index，让头部完全自适应内部内容 */
}

.page-nav {
  background-color: black;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 4em;
  /* 关键：使用sticky定位，top:0表示滚动到视口顶部时自动粘住 */
  position: sticky;
  top: 0;
  z-index: 1000;
  /* 移除原有的margin-bottom和relative定位 */
}

.page-nav .nav-wrapper .nav-brand {
  float: left;
  padding: .584em 0;
  font-size: 1.5em;
}

.page-nav .nav-wrapper .nav-brand a {
  color: yellow;
  text-decoration: none;
}

.page-nav .nav-wrapper .nav-menu {
  margin: 0;
  float: right;
  list-style: none;
}

.page-nav .nav-wrapper .nav-menu .nav-item {
  display: inline-block;
  height: 4em;
  line-height: 1em;
  padding: 1.5em 0;
  margin-left: 2em;
}

.page-nav .nav-wrapper .nav-menu .nav-item .nav-link {
  color: yellow;
  text-decoration: none;
}

.page-main {
  background-color: red;
  padding: 2em 0; /* 添加内边距让内容不贴边 */
  /* 移除原有的padding-top，主体会自然跟随导航栏 */
}

.nav-wrapper, .page-content {
  margin: 0 2em;
}

.header-content {
  margin: 0 6em;
}

方案说明 #

1. 自适应头部：.page-header不再使用固定定位和固定高度，完全由内部内容决定高度，窗口大小调整时自动适配，滚动时会被后面的主体内容自然覆盖。
2. 导航吸顶：position: sticky会让导航栏在正常文档流中，当滚动到视口顶部时自动固定，滚动回头部区域时又会回到原位置，完全符合需求。
3. 兼容性：支持所有现代浏览器（Chrome、Firefox、Safari、Edge），如果需要兼容IE等旧浏览器，可以使用下面的JavaScript方案。

如果需要兼容不支持sticky的旧浏览器，我们可以通过监听滚动事件动态控制导航栏的定位：

调整后的CSS（新增吸顶类）

/* 保留上面纯CSS方案的所有样式，新增以下类 */
.page-nav-scrolled {
  position: fixed;
  top: 0;
  width: 100%;
}

/* 导航固定时，给主体添加padding避免内容被遮挡 */
.page-main {
  padding-top: 4em; /* 等于导航栏的高度 */
}

优化后的JavaScript代码

$(document).ready(function() {
  const $nav = $('.page-nav');
  const navOffset = $nav.offset().top; // 获取导航栏初始的顶部距离
  const scrolledClass = 'page-nav-scrolled';

  function updateNavPosition() {
    // 滚动距离超过导航初始位置时添加吸顶类，否则移除
    $nav.toggleClass(scrolledClass, $(window).scrollTop() >= navOffset);
  }

  // 监听滚动、页面加载和窗口 resize 事件，确保定位准确
  $(window).on('scroll load resize', updateNavPosition);
});

方案说明 #

1. 自适应头部：同样移除了头部的固定定位和高度，保持内容自适应。
2. 动态吸顶：通过offset().top获取导航栏初始位置，滚动时动态切换固定定位类，实现吸顶效果。
3. 窗口适配：添加resize事件监听，确保窗口大小变化时导航栏的位置判断依然准确。

内容的提问来源于stack exchange，提问作者nickfindley