Question

我对Facebook的新时间轴功能印象深刻，特别是当您向下滚动配置文件并显示一个小菜单时，您可以选择查看时间轴或查看有关它们的更多信息。只有当您向下滚动到页面的某个长度时才会显示此div，然后当您向上滚动时我会再次消失。

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

然而，我不确定它的名称以及如何构建它。有没有人建造过这样的东西？

Answer 1

我找到了答案，我正在寻找的是“粘性div”。我首先在Stackoverflow上找到了这个post，然后引导我去了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 Timeline-esque 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）的函数

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

3 个答案: