CSS网格上的粘性标头 [英] Sticky header on css grid

问题描述

我有一个使用CSS网格的漂亮的响应式CSS模板，我想使该响应式CSS网格的标头保持粘性，但是由于标头和导航的设计方式，我无法做到这一点使用固定位置。

是否有更好的方法可以对一些我可能还没有见过的网格属性执行此操作？

< pre class = snippet-code-css lang-css prettyprint-override> * {margin：0; padding：0;} body {display：grid; font-family：sans-serif;} a {文字修饰：无；颜色：白色；}标题，导航{背景：蓝色；颜色：#fff;位置：固定；}导航{显示：弹性； flex-wrap：包装; align-items：center;} nap span {margin-right：auto;} header {display：none;} aside {background：lightgreen;} main {background：pink;} / * mobile * / @ media（最大宽度： 767px）{正文{grid-template-columns：1fr; grid-template-rows：1fr 1fr 1fr; }导航，一旁，主{格栏：1/1;填充：0 15px; }} / *平板电脑* / @ media（最小宽度：768像素）{主体{网格模板列：275像素1fr； grid-template-rows：1fr 1fr; } nav {grid-column：1/4;网格行：1；高度：50px；网格行：1； }除了{grid-column：1; } main {grid-column：2; }导航，放在一边，主{填充：0 15px; }} / *台式机* / @ media（最小宽度：992px）{主体{网格模板列：10％275px 1fr 10％; grid-template-rows：1fr 1fr; }标头{display：block;网格列：1 / -1;网格行：1； } nav {grid-column：2/4;网格行：1； }除了{grid-column：2/3; } main {grid-column：3/4; }} / * xl台式机* / @ 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>徽标< / span> < a href =＃>登录< / a>< / nav>< aside> aside< / aside>< main> main< / main>  

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

解决方案

使用位置：固定； 会将其从流程中删除，因此不会成为您的网格系统的一部分。为此，您可以使用非标准的位置：sticky; 和 top：0; ，后退为

这里，我假设 nav 元素是标题，因为您的标头设置为 display：none; 但位置属性可以移动到网格的任何元素（如果不想显示，为什么在标记中放入 header ？）

  * {margin：0; padding：0;} body {display：grid; font-family：sans-serif;} a {文字修饰：无；颜色：白色；}标题，导航{背景：蓝色；颜色：#fff;位置：固定；}导航{位置：-webkit-sticky;位置：粘性；最高：0;显示：flex; flex-wrap：包装; align-items：center;} nap span {margin-right：auto;} header {display：none;} aside {background：lightgreen;} main {background：pink;} / * mobile * / @ media（最大宽度： 767px）{正文{grid-template-columns：1fr; grid-template-rows：1fr 1fr 1fr; }导航，一旁，主{格栏：1/1;填充：0 15px; }} / *平板电脑* / @ media（最小宽度：768像素）{主体{网格模板列：275像素1fr； grid-template-rows：1fr 1fr; } nav {grid-column：1/4;网格行：1；高度：50px；网格行：1； }除了{grid-column：1; } main {grid-column：2; }导航，放在一边，主{填充：0 15px; }} / *台式机* / @ media（最小宽度：992px）{主体{网格模板列：10％275px 1fr 10％; grid-template-rows：1fr 1fr; }标头{display：block;网格列：1 / -1;网格行：1； } nav {grid-column：2/4;网格行：1； }除了{grid-column：2/3; } main {grid-column：3/4; }} / * xl台式机* / @ 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>徽标< / span> < a href =＃>登录< / a>< / nav>< aside> aside< / aside>< main> main< / main>  

I've got a nifty responsive css template using css grids and I'd like to make the header of this responsive css grid sticky, but because of the way the header and nav is designed, I can't get it to use fixed positioning.

is there a better way of doing this with some grid property I might not have seen yet?

* {
  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/

解决方案

Using position: fixed; will take it out of the flow, and thus won't be part of your grid system. To achieve this, you can use the non-standard position: sticky; with top: 0;, the fallback being it behaving like a non-sticky element.

Here, I'm assuming the nav element is your header, since your header is set to display: none; but the position property can be moved to any element of your grid (why put header in your markup if you're not going to show it?)

* {
  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网格上的粘性标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！