1

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

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

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

4

3 回答 3

0

我找到了答案，我正在寻找的是所谓的“粘性 div”。我首先在 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，我很高兴！

于 2012-04-26T11:18:20.040 回答
0

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

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

它只是检查您在滚动时向下滚动了多远，如果超过 100 像素，则菜单会淡入。如果您返回到 100 像素或更接近页面顶部，它将再次淡出。

于 2012-04-26T11:18:55.067 回答
-1

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

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

看一下源码，有个函数叫showBlogEntry(id)

于 2012-04-26T10:48:24.793 回答