【发布时间】：2020-05-29 15:49:35
【问题描述】：
我正在努力构建粘性侧边栏行为，该行为将与垂直提要一起运行，这与桌面网络上的 facebook 提要非常相似。 position: sticky 适用于侧边栏比视口高度短的简单用例。但是，如果您的侧边栏大于视口，则侧边栏需要有一些滚动机制，以便您在向下滚动提要时可以看到侧边栏的底部。
我正在尝试在这里重新创建 facebook 侧边栏粘性滚动。
了解所需行为的最佳方法是测试您的 facebook 提要并缩小屏幕高度，以使您的视口小于侧边栏高度。我在这里尝试总结一下：
当您的视口高于侧边栏时（简单情况）
- 侧边栏的行为与您对 position:sticky 的期望完全一样。当您向下和向上滚动时，侧边栏将保持在同一位置并跟随。
当您的视口小于侧边栏时
- 当您最初向下滚动时，边栏会随着提要一起滚动（它们看起来是固定在一起的）
- 当您到达侧边栏的底部时，它会锁定在底部，并且随着您向下滚动更多，侧边栏现在看起来很粘，底部固定
- 当您现在向上滚动时，侧边栏将再次显示为附加到您的主要提要，并与主要提要一起向上滚动。一旦你点击侧边栏的顶部，它就会粘住并固定顶部。
- 因此在这两种状态之间（向上滚动时顶部固定，向下滚动时底部固定），侧边栏与主提要同步滚动。
这是一种非常棒的滚动体验，但很难重新创建。
我已经完成了上面步骤 1-3 中列出的状态，方法是应用带有 top 位置的粘性位置，当您向下滚动时，使用滚动事件和一些视口/侧边栏高度计算来确定高度差并调整top css 值，因此当底部与屏幕对齐时它会锁定（基本上是initialTop - (sidebarHeight - viewportHeight)。我无法弄清楚步骤 4 和 5。我能做的最好的事情是在两个 top 值之间转换，具体取决于您的滚动方向，但这是一个非常糟糕的用户体验。
我在这里有一个沙盒布局示例：https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
有一个包含 2 列（左侧边栏和主提要）的基本布局。还有一个名为 StickyScroll 的反应组件，它环绕列，并具有更新 top 值的所有逻辑。对于一个好的解决方案，这可能是一个完全错误的开始，但我们非常感谢任何帮助。
【问题讨论】：
-
我尝试了 facebook 提要，但我认为没有 5 很奇怪。在 facebook 中，您将在到达侧边栏顶部后向上滚动提要。如果您的意思是 unison 中的侧边栏与主要提要，它不像 facebook 那样。在我考虑解决方案之前，我想问你。你想制作像 facebook 这样的侧边栏还是这是新的东西，尤其是在第 5 点？
-
@Angiosty 实际上，自从 2020 年晚些时候 facebook 重新设计以来，侧边栏实际上是独立滚动的。对于这个问题，我有一个非常复杂的解决方案，但我们最终转向了与 facebook 重新设计类似的解决方案