我在这里查看了其他示例，但找不到可以实现此目的的示例。我希望侧边栏（部分）在页面滚动时保持粘性。如果我把它放在导航上，位置：粘性就可以工作，所以我的浏览器默认支持它。
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>您需要对您想成为的事物使用
align-self: startstickymain {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
background: grey;
}
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;
align-self: start;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}<main>
<nav></nav>
<section>
hi
</section>
<article>
<p>hi</p>
</article>
</main>您在这里面临的问题是，您的剖面块占用了整个高度。所以它不会粘住，因为它太大了。您需要在您的部分中放置一个子元素并赋予其粘性属性，以使其正常工作。根据你的例子，我只是将你的“嗨”包裹在一个 div 中。
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
min-height: 1000px;
}
nav {
background: blue;
height: 100%;
grid-column: 1 / 4;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
}
section div {
position: sticky;
top: 0;
}
article {
background: yellow;
grid-column: 2 / 4;
}<main>
<nav></nav>
<section>
<div>
<p>one</p>
</div>
</section>
<article>
<p>two</p>
</article>
</main>编辑：这就是问题的原因：具有 display: grid
的元素具有
align-items到
stretch的默认属性，这意味着所有子元素都具有相同的高度。您可以通过设置
align-items: start;来避免这种情况，下面是另一个没有附加 div 的示例。
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
min-height: 1000px;
align-items: start;
}
nav {
background: blue;
height: 100%;
grid-column: 1 / 4;
}
section {
position: sticky;
top: 0;
background: grey;
grid-column: 1 / 2;
grid-row: 2;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}<main>
<nav></nav>
<section>
<p>one</p>
</section>
<article>
<p>two</p>
</article>
</main>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
top: 0;
left: 0;
}
.fixed-section {
position: fixed;
z-index: 1;
overflow-x: hidden;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
</style>
</head>
<body>
<main>
<nav></nav>
<section>
<div class='fixed-section'>
<a href="#">Hi 1</a>
<div>
</section>
<article>
<p>hi</p>
</article>
</main>
</body>
</html>