如何使用 CSS-grid 创建一个粘性标题？答案

【问题标题】：How to create a sticky header with CSS-grid?如何使用 CSS-grid 创建一个粘性标题？
【发布时间】：2025-12-04 17:20:13
【问题描述】：

我想让我的标题在使用 CSS 网格滚动时保持粘性。

我已经尝试过这里提出的解决方案：Sticky header on css grid 含义：

position: sticky; 
top:0;

但是它不起作用......

.wrapper {
  display: grid;
  grid-template-areas: "header" "middle" "footer";
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}


/* Header */

header {
  order: 1;
  grid-area: header;
  display: grid;
  grid-gap: 100px;
  grid-template-areas: "logo nav";
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  position: sticky;
  top: 0;
}

nav {
  display: grid;
  grid-area: nav;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}


/* Middle */

.middle {
  order: 2;
  grid-area: middle;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
}

.middle>* {
  grid-column: 2 / -2;
}


/* Footer */

footer {
  order: 3;
  grid-area: footer;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.footer-links {
  display: grid;
  grid-column: 2 /-2;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  align-items: center;
}

<body>
  <div class="wrapper">

    <!-- Header -->
    <header>
      <a href="./index.html" title="Welcome" class="logo"><img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px"></a>
      <nav>
        <a href="./index.html" title="Welcome" class="welcome active">Welcome</a>
        <a href="./about.html" title="About" class="about">About</a>
        <a href="./artwork.html" title="Art Work" class="artwork">Art Work</a>
        <a href="./events.html" title="Events" class="events">Events</a>
      </nav>
    </header>
    <!-- Middle -->
    <section class="middle">
    </section>

    <footer>
      <div class="footer-links">
        <a href="https://www.instagram.com/jaeaess/" target="_blank">Instagram</a>
        <p>&copy; 2019 Jääß</p>
      </div>
    </footer>
  </div>

</body>

一切都按我的意愿显示，除了标题向下滚动而不是保持固定...

（对于那些想知道的人，我下订单只是为了在开发后期将其移动到媒体查询中）

感谢您的回答！

【问题讨论】：

我不认为position:sticky 意味着你认为它的意思。应该向下滚动，但当它到达顶部时它会停止。是这样吗？
你不应该使用position: sticky。它有糟糕的浏览器支持。 caniuse.com/#feat=css-sticky
你介意页眉有固定的高度吗？
@Paulie_D 它在顶部，但只要我向下滚动它就会向上并从浏览器的可见部分消失......
@Reijo 是的，如果我碰巧更改徽标或在移动设备上，我更希望尺寸保持“自动”以获得更大的灵活性......

标签： css css-position css-grid

【解决方案1】：

要在滚动时固定标题，您可以将其设为position: fixed。这需要您为标题设置固定高度。这将使标题元素在内容之上流动，并忽略相对于窗口的滚动。

  
.wrapper {
  /* the header will not take any vertical place so shift wrapper down a bit*/
  margin-top: 3rem; 
  display: grid;
  /*I removed the header area as we don't need it anymore and would not work with fixed position anways*/
  grid-template-areas: "middle" "footer";
  grid-template-rows: 1fr auto;
   /*I set the wrapper height to `200vw` so its easier to see the header not scrolling. Also take maring top into account*/
  height: calc(200vh - 3rem);
}


/* Header */

header {
  display: grid;
  grid-gap: 100px;
  grid-template-areas: "logo nav";
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  position: fixed;
  top: 0;
  height: 3rem;
  width: 100%;
}

nav {
  display: grid;
  grid-area: nav;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}


/* Middle */

.middle {
  order: 2;
  grid-area: middle;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
}

.middle>* {
  grid-column: 2 / -2;
}


/* Footer */

footer {
  order: 3;
  grid-area: footer;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.footer-links {
  display: grid;
  grid-column: 2 /-2;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  align-items: center;
}

<div class="wrapper">
  <!-- Header -->
  <header>
    <a href="./index.html" title="Welcome" class="logo"><img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px" /></a>
    <nav>
      <a href="./index.html" title="Welcome" class="welcome active">Welcome</a
          >
          <a href="./about.html" title="About" class="about">About</a>
      <a href="./artwork.html" title="Art Work" class="artwork">Art Work</a>
      <a href="./events.html" title="Events" class="events">Events</a>
    </nav>
  </header>
  <!-- Middle -->
  <section class="middle"></section>

  <footer>
    <div class="footer-links">
      <a href="https://www.instagram.com/jaeaess/" target="_blank">Instagram</a
          >
          <p>&copy; 2019 Jääß</p>
        </div>
      </footer>
    </div>

Ps.：你现在有点过度使用 css 网格。它专为二维布局而设计。如果您使用 flexbox，您的布局会更容易（！）。在 IE 11 中也可以使用 pain。

【讨论】：

感谢@Reijo，它可以工作，标题现在卡在顶部！但是我现在遇到了另一个问题...标题的导航部分位于徽标底部的“下方”...我可以删除徽标的填充，但是然后我的徽标变得非常小，或者添加一个：`头{溢出：隐藏； } ` 但是它很丑，因为菜单项看起来不再居中但是有点太低了......
不抱歉，我的错，它可以工作，只是我的背景颜色在标题上，由于某些神秘的原因不起作用，但是将背景颜色放在我添加的 div 上徽标的大小与导航相同:) 非常感谢@Reijo！
实际上我现在有另一个问题正在运行，我的另一个页面的内容被标题“吃掉”了一点......为什么我的包装网格没有在标题下开始？我什至从 div 包装器中删除了 header 元素，但它仍然覆盖它
页眉和导航网格大小合适，但 div 包装器和中间部分“吃掉”了页眉的底部...... jaeaess.com
现在有点跑题了。您应该为此开始一个新问题。