我正在构建粘性侧边栏行为，它将与垂直提要一起运行，这与桌面Web上的Facebook提要非常相似。position: sticky适用于侧边栏比视口高度短的简单用例。但是，如果您的侧边栏比视口大，则侧边栏需要一些滚动机制，以便在向下滚动时可以看到侧边栏的底部喂。
我正在尝试重新创建facebook侧边栏的滚动条。
了解你想要的行为的最好方法是测试你的facebook feed，缩小你的屏幕高度，让你的 windows 比你的侧边栏小，我试着总结一下：

• • 当 windows 高于侧边栏时（简单情况）**

1.侧栏的行为与您对位置的预期完全相同：粘性。侧边栏停留在同一位置，并随着你向下和向上滚动。

• • 当 windows 小于侧边栏时**

1.当你开始向下滚动时，侧边栏会随着提要一起滚动（它们看起来固定在一起）
1.当你到达侧边栏的底部时，它会锁定在底部，当你向下滚动更多时，侧边栏现在会显示为底部固定的粘性
1.当你现在向上滚动时，侧边栏会再次显示为与主订阅源相连，并随主订阅源一起向上滚动，一旦你到达侧边栏的顶部，它就会与顶部固定在一起。
1.因此，在这两种状态（向上滚动时顶部固定，向下滚动时底部固定）之间，侧边栏与主提要同步滚动。
这是一个非常好的滚动体验，但很难重现。
我已经完成了上面步骤1 - 3中列出的状态，方法是对top位置应用位置粘性，当你向下滚动时，使用滚动事件和一些视口/侧边栏高度计算来确定高度差，并调整top css值，以便当底部与屏幕对齐时锁定（本质上是initialTop - (sidebarHeight - viewportHeight)。我无法弄清楚步骤4，我能做的最好的就是根据你的滚动方向在两个top值之间转换，但是这是一个非常糟糕的UX。
我这里有一个布局的沙盒示例：https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
有一个基本的2栏布局（左侧栏和主提要），还有一个名为StickyScroll的react组件，它包含了更新top值的所有逻辑，对于一个好的解决方案来说，这可能是一个完全错误的开始，但任何帮助都是非常感谢的。