屏幕宽度较小时粘性侧边栏的position如何解决？

Question

我想要 position 主面板右侧的粘性侧边栏。 粘性侧边栏应该是“粘性”的，当向下滚动到自身顶部时，侧边栏将确定 position 并粘在页面顶部，而不是向上滚动。

我在这里完成了部分工作： https://codesandbox.io/s/gallant-saha-zgmnw

现在我的问题是：如小提琴所示，在sidebar class 中，带有position: sticky和right: 15rem ，侧边栏仅适用于宽屏宽度。 如果屏幕宽度缩小，侧边栏组件将保持 15rem 向右和 position 错误。 缩小页面并查看错误行为。

我知道将固定的 15rem 设置为右侧可能是错误的，当屏幕宽度缩小到一定宽度时，如何将侧边栏保持在主面板的右侧？

Answer 1

我认为您可能想研究在 css 上使用媒体查询来检测不同的屏幕尺寸并相应地更改侧边栏上的“正确”属性。

假设您在 600px 处设置了一个断点，该断点的媒体查询将如下所示：

@media only screen and (max-width: 600px) {
  .sidebar {
    &-fixed {
      right: 0px;   
    }
  }
}

这意味着当屏幕尺寸小于 600px 宽度时，侧边栏上的 right 属性将设置为 0px。