css - 如何使用 CSS-grid 创建粘性标题？-6ren

css - 如何使用 CSS-grid 创建粘性标题？

转载作者：行者123 更新时间：2023-11-27 23:34:18

27

4

我想在使用 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: fixed。这需要您为页眉设置固定高度。这将使 header 元素在内容之上流动，并忽略相对于窗口的滚动。

  
.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 .

关于css - 如何使用 CSS-grid 创建粘性标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57325337/

27

4

0

文章推荐： c++ - 启动程序失败，错误代码为 1

文章推荐： javascript - sortBy 不对指令表中的项目进行排序

文章推荐： c++ - 将多个数据存储到一个文件中

文章推荐： html - 使外部 block 与内部行内 block 的宽度一样宽

grid - 使用 grid.arrange 为使用 gridExtra::grid.arrange 制作的多个图添加标题
我必须使用 gridExtra::grid.arrange 来绘制除彼此之外的多个图，因为我使用该包来创建图的拟合。我必须使用 grid.arrange 为绘图创建一个标题。现在我想将两者结合起来
angularjs - ag-grid vs slick-grid vs angular-grid 哪个更好？
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 4年前关闭。 Improve t
angular - AG-GRID 无法将图标按钮添加到我的 ag-grid 中的 ag-grid 和多选复选框的每一行
在我的农业网格的每一行中。我需要在每一行 ag-grid 中添加 Angular Material 图标按钮。但是，结果只显示了文本按钮。它不会在我的农业网格中显示我的图标按钮。接下来，我需要在我的
grid - KendoUI Grid 服务器分页
我正在尝试使用 JSON 数据填充 KendoUI 网格，其中服务器返回总行数以及数据，但是我在让 serverPaging 正常工作时遇到了一些问题。我创建并分配网格的数据源如下:
grid - Kendo Grid - 它自己的加载指示器
Kendo 网格在网格加载、分页、排序时自动提供自己的加载指示器。它工作正常。但我不希望显示/隐藏此内置加载指示器。如何禁用此功能？请建议我。谢谢，维诺特最佳答案很简单，只需用 CSS
grid - Deco Grid 系统发生了什么
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 11 年前。 Improve thi
grid - dojox.grid.EnhancedGrid如何设置noDataMessage？
我正在尝试将noDataMessage设置为dojox.grid.EnhancedGrid，网格工作正常，当商店获取数据时它显示它是行，没有问题，但是我需要当商店没有数据时网格将向我显示个性化消息。我
javascript - 为什么我不能使用Ext.grid.Grid？
我的 ExtJS 6 框架有问题。当我使用 Ext.grid.Panel 时它可以工作，但我想使用 Ext.grid.Grid 。 Ext.grid.Panel 和 Ext.grid.Grid 有什么
datatables - Datatable vs Angular UI Grid vs Slick Grid vs Ag-Grid
我看到有几种风格的网格。当记录很大时，人们建议使用 Angular UI Grid 而不是 Datatables。我认为数据表正在按 1 填充每一行并导致性能问题。是否无法修复类似于其他网格的数据
process - 在 Grid Engine/Sun Grid Engine/Son of Grid Engine 上使用 Docker
是否有人有在 Grid Engine/Sun Grid Engine/Son of Grid Engine 上运行 Docker 的经验，并且能够 monitor the resource used
html - CSS 网格 : grid-row/column-start/end VS grid-area + grid-template-area
我一直在阅读 CSS Grid tutorial在 CSS Tricks 中，但一个基本方面让我有点困惑。似乎有两种方法可以决定一个网格元素跨越多少个单元格: grid-template-area使
angular - 在两个单独的 ag-Grid 上使用 ag-Grid 的 sizeColumnsToFit() 时出现警告 'grid zero width'，由选项卡菜单显示
调整 ag-Grid 的大小(更改浏览器窗口的大小)并在两个选项卡之间切换时收到以下警告: ag-Grid: tried to call sizeColumnsToFit() but the grid
python - 在 Python 2.7 中，为什么 grid = [ ["A"]*5]*5 不同于 grid = [] grid.append[...]
我正在尝试在 python 2.7 中构建一个 5x5 网格的游戏板，表示为二维列表。我尝试将其写为 board = [["O"]*cols]*rows (cols 和 rows 已声明为 5)但是当
ag-grid - Ag Grid 自定义日期过滤器
AgGrid 日期筛选器的格式是mm/dd/yyyy，但我想将其更改为yyyy/mm/dd 我该怎么做？日期过滤器是网格的 columnDefinition 的一部分，我在其中使用 filter: '
ag-grid - 无法显示 ag-grid
我有一个基本的 ag-grid 和一些简单的虚拟数据，但它只在我不导入库提供的 .css 文件时显示，即使这样它也显示不正确。摘 self 的 package.json: "ag-grid": "1
ag-grid - Ag Grid - 如何将标准单元格编辑器的宽度和高度设置为单元格的全宽和高度
我有一个标准的单元格编辑器，当我处于编辑模式时，单元格编辑器的宽度和高度不是单元格的完整宽度和高度。我应该覆盖样式还是配置中有任何标志可以关闭此效果？最佳答案我有同样的问题。如果您查看 DOM，
ag-grid - 插入行而不刷新 ag-grid
概览以前在 ag-grid 版本 <10.1.0 中，可以通过这种方式在不刷新网格的情况下添加一行: let model: IRowModel = this.gridOptions.api.getM
grid - 合并 wx.Grid 中的相邻单元格
是否可以合并 wx.grid 中相邻的单元格？我的意思是水平作为一行中的单元格和垂直作为一列中的单元格。最佳答案有一种方法可以让文本跨越网格小部件中的多行或多列。 wxPython 演示中有一个名
Ng-grid 与 ui-grid
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 6年前关闭。 Improve this questi
grid - 在 wx.grid 中输入关键行为
谷歌搜索了很多没有任何结果...按下回车键时网格的默认行为是向下移动光标。但我必须使单元格编辑器在当前单元格中打开。我可以轻松 Hook 关键事件，但如何打开编辑器？最佳答案 import wx i

首页

博学

6Ren·AI

商城

css - 如何使用 CSS-grid 创建粘性标题？