Javascript 如何使div粘到顶部或底部，取决于用户滚动的方式？

你好。我知道在滚动时将div粘贴到顶部或底部有很多问题，但我的问题更具体

问题是我希望div保持在顶部或底部，这取决于用户滚动的方式

我制作了这个JSFIDLE代码片段来展示内容是如何设置的：

我想要的结果是：每当用户滚动时，侧边的内容也应该与其他内容同时滚动。如果侧边的内容到达末端（顶部或底部），则应粘贴到顶部或底部（取决于到达内容末端的位置）

例如，在我提供的代码片段中，我希望侧边的内容滚动到“Fixed content Last.”可见为止，然后在用户向下滚动时粘到底部。现在，如果用户向上滚动，我希望侧边内容也向上滚动，直到“Fixed content First.”可见，然后粘到顶部

侧contnet的Html：

<nav >
      <div id="filterAnchor"></div>
      <div id="filterScroll" class="fixed_div">
          Fixed content First.</br>
          Fixed content.</br>
          Fixed content.</br>
          ...
          [more "Fixed content."]
          ...
          Fixed content.</br>
          Fixed content.</br>
          Fixed content Last.</br>
      </div>
</nav>

固定内容优先

固定内容

固定内容

...
[更多“固定内容”。]
...
固定内容

固定内容

最后固定内容

首先，您需要知道滚动方向。如果我是对的，你希望粘性的侧边栏滚动内容，但永远不要看不见

我已经编辑过了

它应该需要一些优化，但我希望你得到的想法。棘手的部分是检查是否到达底部，我仍然不确定这是否是正确的方法：

if ($window.height() <= $filterClass.height() + top) {
    $filterClass.addClass('stick-bottom');
    $filterClass.css('top', '');
}

---

<代码> >（$WORK.HEAD（）），这并不能完全解决我的问题，因为中间的内容没有显示，但这是一个开始。谢谢。你能说明中间内容的意思吗？在小提琴中显示了所有内容。我也更新了，并在HTML中添加了一些模式行。“固定内容中间。"现在它们没有显示。当侧边内容比视口的高度长时，侧边内容会跳到顶部或底部，我知道这是不必要的行为。当我有时间时，我将对此进行研究。如果调整视口/框架的大小，您将看到中间内容没有完全隐藏。我必须允许侧边和主内容滚动当侧边比视口长时。这是必需的行为吗？如果是，我将在回答中添加解释。

// top means position top of the fixed side
if(top < 0 && fixedHeight + top < windowHeight) {
    $filterClass.addClass('stick-bottom');
    $filterClass.css('top', '');
} else {
    $filterClass.css('top', top+diff);
}