屏幕宽度较小时如何固定侧边栏的位置？

Question

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

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

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

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

Answer 1

我认为您可能希望考虑在您的 css 上使用媒体查询来检测不同的屏幕尺寸并相应地更改侧边栏上的“右”属性。

假设您在 600 像素处设置了一个断点，该断点的媒体查询将是这样的：

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

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