Css 如何修复网格中内容旁边的项，使其始终保持在视图中

我有一个简单的网格，左窗格作为目录，右窗格作为内容。当用户滚动内容时，如何使左窗格中的内容保持在原来的位置（已修复？），以便它始终在视图中。下面是一个js提琴，说明了这个问题，我的代码如下：

提前感谢您的帮助。

好的，您可以用这个

#grid{
  display: grid;
  grid-template-columns: 1fr 3fr;
}

#grid div:first-child {
  position: fixed;
  width: 200px;
  top: 0;
}

#grid div:last-child {
  margin-left: 200px;
  width: 100%;
}

因为

position:fixed

将元素置于您所需的一切之上，以使其具有固定的宽度，并将可滚动内容向右推，以获得固定内容的大小

这样你就会达到预期的效果

---

了解有关定位的更多信息

您可以使用

position:sticky

但是

您需要第二列跨越2行，否则，两列将一起向上滚动

id

每个文档只能使用一次，请改用

class

使用跨越和背景色查看两个框的位置

#网格{
显示：网格；
网格模板柱：1fr 3fr；
}
.第1栏{
网格行：跨度2；
背景：浅蓝色；
}
.粘的{
位置：粘性；
排名：0；
网格行：跨度1；
}

目录（当用户向下滚动以阅读第2列中的内容时，如何使其保持在视图中？）
超长内容Lorem ipsum dolor sit amet，奉献精英。Aspernatur，voluptate，id.Reprehenderit quae tempora totam，sed ipsam at。多洛雷姆库是一家专门为消费者提供服务的公司，它是一家专门为消费者提供服务的公司！乱数假文
多洛·西特·艾米特，奉献给精英们。不需要赞美，全方位的爱是自然的。选择共同劳动，不承担任何责任，不履行任何义务！Lorem ipsum dolor sit amet，Concertetur Adipising
精英们坐在一起，为精英们献身。Aspernatur，voluptate，id.Reprehenderit quae tempora totam，sed ipsam at。多洛雷姆库是一家专门为消费者提供服务的公司，它是一家专门为消费者提供服务的公司！同侧阴唇
坐在阿梅特，奉献给精英们。不需要赞美，全方位的爱是自然的。选择共同劳动，不承担任何责任，不履行任何义务！Lorem ipsum dolor sit amet，Concertetur Adipising
精英。不动产占有选择权，e。除福加外，其他人在小白鼠体内的选择权。不履行义务，不履行义务，不履行义务
精英。所有人都有自己的经历，他们的脸上都有自己的血肉之躯，也有自己的血肉之躯，有自己的生命之躯。Aspernatur，voluptate，id.Reprehenderit quae tempora
totam，sed ipsam在。多洛雷姆库是一家专门为消费者提供服务的公司，它是一家专门为消费者提供服务的公司！Lorem ipsum dolor sit amet，奉献精英。不需要赞美，全方位的爱是自然的。选择权
我们的共同劳动是我们的责任，我们的解决方案是我们的责任！Lorem ipsum dolor sit amet，奉献精英。选择是否拥有权利，是否真正拥有权利，是否拥有权利，
阿迪皮斯精英。不，这是一个很重要的问题，它被放置在一个类似于实验室的位置，以避免不必要的痛苦和痛苦。

#grid{
  display: grid;
  grid-template-columns: 1fr 3fr;
}

#grid{
  display: grid;
  grid-template-columns: 1fr 3fr;
}

#grid div:first-child {
  position: fixed;
  width: 200px;
  top: 0;
}

#grid div:last-child {
  margin-left: 200px;
  width: 100%;
}