如何创建iPhone联系人标题滚动效果为HTML？

Question

我已经设置了一个基本的jsFiddle来更好地了解我想要发生的事情。

http://jsfiddle.net/nicekiwi/p7NaQ/2/

希望如果你想到iOS上iPhone的联系页面，你正在查看的联系人字母表的哪个部分，以及当你滚动页面时它会如何变化，你会得到这个想法，如果没有请继续阅读。

基本上，我在单列垂直滚动页面中有部分内容。当第一个标题的顶部（jsFiddle中的标题1）到达屏幕顶部时，向下滚动页面，它将粘在顶部，直到你到达下一个标题（标题2），在“标题”当你滚动时，2“将保持其位置，并且”标题1“将被推出现场，对于其余的标题也是如此。

当向上滚动页面时，反向会发生，例如......“标题4”将保留到位，当达到“标题3”内容的底部时，“标题3”将无缝地出现在“标题4”上方并保持在屏幕的顶部，直到它达到自己内容的顶部。

我想在HTML / CSS中使用Mootools 1.3作为我选择的JavaScript库来创建它。

关于我如何做到这一点的任何想法？欢呼声。

Answer 1

我实际上没有看到你的帖子，直到有人指出我的帖子是重复的，看看这个Freeze Header until Irrelevant (HTML, CSS and JS)