如何使一个div在另一个div离开屏幕时显示，如Facebook的时间线功能

Question

我对Facebook的新时间线功能印象深刻，特别是当您向下滚动个人资料并显示一个小菜单时，您可以选择查看他们的时间线或查看有关他们的更多信息。此div 仅在您向下滚动到页面的特定长度时显示，然后当您向上滚动时，我再次消失。

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

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

Answer 1

我找到了答案，我正在寻找的被称为"粘性divs"。我首先在Stackoverflow上发现了这篇文章，然后把我带到了这个网站，它解释了这个概念并给出了代码。

使用该代码，我修改了它以提供我需要的东西。所以在 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，我很高兴！

Answer 2

我创建了一个示例常见问题解答页面（非常基本），其中包含问题列表，当您向下滚动时，在 100px 之后，页面顶部会出现一个项目：http://jsfiddle.net/LKqwY/

$(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > 100) {
            $('#menu').fadeIn();
        } else {
            $('#menu').fadeOut();
        }
    });
});​

它只是检查您在滚动时向下滚动了多远，如果超过 100px，菜单就会淡入。如果您向上移动并且距离页面顶部为 100px 或更近，它将再次淡出。

Answer 3

如果你点击一个按钮，你必须加载你想要显示的数据，然后你可以在页面上使用jquery向下滚动：$('html, body').animate({scrollTop:1056}, 'slow',function(){ alert('scrolling is done');});

我在此页面上实现了它：http://greenpark.shoplupe.com/

看看源代码，有一个名为showBlogEntry（id）的函数