如何使用CSS-grid创建粘性标题？
如何使用CSS-grid创建粘性标题？
提问于 2019-08-02 19:11:06
我想让我的标题粘性时滚动使用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>© 2019 Jääß</p>
</div>
</footer>
</div>
</body>
一切都按照我想要的那样显示，除了标题向下滚动而不是停留在固定位置...
(对于那些想知道的人，我下达的订单只是为了在开发的后期在媒体查询中移动它)
感谢您的回答！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-03 06:41:17
要使标题在滚动时固定，您可以将其设置为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>© 2019 Jääß</p>
</div>
</footer>
</div>
附言:你现在有点过度使用css网格了。它是为二维布局而设计的。你的布局会有很多(！)如果您使用的是flexbox，则会更容易。让网格在IE11中工作的还有一个pain。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57325337
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号