如何为 html 创建 iPhone 通讯录标题滚动效果？
我已经设置了一个基本的 jsFiddle 来更多地了解我想要发生的事情。
http://jsfiddle.net/nicekiwi/p7NaQ/2/
希望您能想到 iOS 上的联系页面对于 iPhone，您正在查看联系人字母表的哪个部分，以及当您滚动页面时它如何变化，如果不继续阅读，您就会明白。
基本上，我在单列垂直滚动页面中有部分内容。当第一个标题的顶部（jsFiddle 中的标题 1）到达屏幕顶部时，当您向下滚动页面时，它会停留在顶部，直到到达下一个标题（标题 2），即“标题”当您滚动时，“2”将保持其位置，而“标题 1”将被推到站点之外，对于其余标题，依此类推。
当向后滚动页面时，会发生相反的情况，例如......“标题 4”将保留在原位，当到达“标题 3”内容的底部时，“标题 3”将无缝地出现在“标题 4”上方并停留在屏幕顶部，直到到达其自身内容的顶部。
我想使用 Mootools 1.3 作为我选择的 JavaScript 库，在 HTML/CSS 中创建它。
关于我如何做到这一点有什么想法吗？干杯。
I've setup a basic jsFiddle to give more of an idea of what I'd like to happen.
http://jsfiddle.net/nicekiwi/p7NaQ/2/
Hopefully if you think of the contact page on the iOS for the iPhone in terms of what section of the alphabet of contacts you're looking at and how it changes as you scroll the page you'll get the idea, if not read on.
Basicly, I have sections of content within a single column vertical scrolling page. When the top of the first header (title 1 in the jsFiddle) get to the top of the screen as ou scroll down the page it would stick at the top until you get to the next header (title 2), at the point "Title 2" would hold its position while you scroll and "Title 1" would be pushed up out of site and so on for the rest of the headers.
And when scrolling back up the page the reverse would happen eg.. "title 4" would stay in place and when the bottom of "title 3"s content was reached "title 3" would seamlessly appear above "title 4" and stay at the top of the screen till it reaches the top of its own content.
I want to create this in HTML/CSS with Mootools 1.3 as my JavaScript Library of choice.
Any ideas on how I could do this? Cheers.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我实际上没有看到你的帖子，直到有人指出我的帖子是重复的，看看这个 冻结标头直到不相关（HTML、CSS 和 JS）
I didn't actually see your post until someone pointed mine out as a duplicate, take a look at this Freeze Header until Irrelevant (HTML, CSS and JS)