屏幕寬度較小時粘性側邊欄的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。