jquery - 如何在另一个 div 离开屏幕时显示一个 div，例如 Facebook 的时间轴功能

Question

Facebook 的新时间线功能给我留下了深刻的印象，尤其是当您向下滚动个人资料并显示一个小菜单时，您可以选择查看他们的时间线或查看有关他们的更多信息。这个 div 只有当你向下滚动到页面的特定长度时才会显示，然后当你向上滚动时 i 再次消失。

我正在构建一个元素，这种系统将使它受益匪浅。有一个很长的 FAQ 页面，我认为最好在屏幕左侧提供 FAQ 菜单，这样用户可以自然地向下滚动并可以选择跳转到不同的问题，而不是使用 Accordion 系统，并且有用户点击 FAQ 标题，然后显示内容。

但是，我不确定它叫什么以及我将如何构建它。有没有人 build 过这样的东西？

Answer 1

我找到了答案，我要找的是“粘性 div”。我第一次发现这个post在 Stackoverflow 上，这让我想到了这个 website其中解释了概念并给出了代码。

使用该代码，我对其进行了修改以提供我需要的东西。所以在 HTML 中我放了:

<div id="quicknav" style="display:none;">
    <p>Navigation!</p>
</div>

在 JQuery 中:

function sticky_relocate() {
  var window_top = $(window).scrollTop();

  var div_top = $('#faq').offset().top;

  if (window_top > div_top)
    $('#quicknav').show()
  else
    $('#quicknav').hide();
  }

  // If you have jQuery directly, use the following line, instead
  $(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
  });

这段代码让我拥有了一个 Facebook 时间轴式的 div，我很高兴!