css 网格上的粘性 header

Question

我有一个漂亮的响应式 css 模板，它使用 css 网格，我想让这个响应式 css 网格的 header 变粘，但是由于 header 和导航的设计方式，我无法使用固定定位。

有没有更好的方法来处理一些网格属性我可能还没有见过？

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
  position: fixed;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */

@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */

@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  aside {
    grid-column: 1;
  }
  main {
    grid-column: 2;
  }
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */

@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  header {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */

@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

<header></header>
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

https://jsfiddle.net/90kotz8d/3/

Answer 1

使用 position: fixed; 会将其从流程中取出，因此不会成为您的网格系统的一部分。要实现这一点，您可以将 non-standard position: sticky; 与 top: 0; 一起使用，回退是它的行为类似于 non-sticky 元素。

在这里，我假设 nav 元素是您的 header，因为您的 header 设置为 display: none; 但 position 属性可以移动到网格的任何元素（如果不打算显示它，为什么要在标记中放置 header？）

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
  position: fixed;
}

nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */

@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */

@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  aside {
    grid-column: 1;
  }
  main {
    grid-column: 2;
  }
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */

@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  header {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */

@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

<header></header>
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

css 网格上的粘性 header

Sticky header on css grid

css

css-grid