如何创建iPhone联系人标题滚动HTML的效果？ [英] howto create the iPhone Contacts header scroll Effect for html?

问题描述

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

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/

希望如果您认为iOS上的iPhone上的联系人页面，就您正在查看的联系人字母表中的哪一部分以及在滚动页面时如何更改，如果未阅读，则会显示该提示。

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.

基本上，我在单列垂直滚动页面中有一些内容。当第一个标题的顶部（jsFiddle中的标题1）到达屏幕顶部时，向下滚动页面，它会在顶部，直到你到达下一个标题（标题2），在标题2将保持其位置，而您滚动和标题1将被推出网站，等等其余的标题。

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.

当向后滚动页面反向将发生例如..标题4将保持在原地，当标题3的内容的底部达到标题3将无缝地出现在标题4之上，并保持在

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.

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

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.

推荐答案

我没有实际看到你的帖子，直到有人把我指出为重复， a href =http://stackoverflow.com/questions/7385068/freeze-header-until-irrelevant-html-css-and-js/>冻结标头，直到不相关（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)

这篇关于如何创建iPhone联系人标题滚动HTML的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！