我在这里看了其他的例子,但找不到一个让这个工作.我希望在页面滚动时侧边栏(部分)是粘性的.位置：粘贴有效,如果我把它放在导航,所以我的浏览器def支持它.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
position: sticky;
top: 0;
left: 0;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
<main>
<nav></nav>
<section>
hi
</section>
<article>
<p>hi</p>
</article>
</main>
解决方法
部分需要一个高度,以便粘性达到你想要的效果,并且因为有粘性的潜在怪癖(即当你到达页面底部时,部分会向上推过网格行1),我会在网格行开始部分1而不是2以及包装容器.
假设你的导航也是粘性的,我会设置它的z-index,使它位于该部分的顶部.
我还建议使用@support来使用其他人提到的固定解决方案.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
z-index: 2;
position: sticky;
top: 0;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 1;
position: sticky;
top: 0;
left: 0;
height: 100vh;
}
section #contents {
position: relative;
top: 55px;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
<main>
<nav></nav>
<section>
<div id="contents">
contents
</div>
</section>
<article>
<p>article</p>
</article>
</main>
