Question

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

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

我制作了这个jsFiddle代码段来展示内容的设置方式：https://jsfiddle.net/DTcHh/6155/。

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

例如，在我提供的代码段中，我希望侧面的内容滚动到“固定内容最后”。可见，然后在用户向下滚动时粘到底部。现在，如果用户向上滚动，我希望旁边的内容也向上滚动，直到“固定内容优先”。是可见的，然后坚持到顶部。

侧面的网址：

<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>

Answer 1

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

我已编辑the fiddle来执行此操作。

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

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

编辑（有关更多上下文，请参阅注释）：

通过这个updated fiddle，我增加了对不同情况的支持：

<强> 1。当副内容长于主要内容时：
默认位置是绝对的。无需javascript即可正常工作。

<强> 2。当副内容长于窗口高度时：
该位置设置为固定。当向下滚动（内容向上移动）时，边到达时会粘到底部：

// 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);
}

第3。当副内容短于窗口高度时：
该位置设置为固定。情况与上述原始答案一样。

如何根据用户的滚动方式将div粘贴到顶部或底部？

1 个答案:

编辑（有关更多上下文，请参阅注释）：