我已经设置了一个基本的jsFiddle来更好地了解我想要发生的事情.
http://jsfiddle.net/nicekiwi/p7NaQ/2/
希望如果你想到iPhone上的iPhone联系页面,你正在查看的联系人字母表的哪个部分,以及当你滚动页面时它会如何变化,你会得到这个想法,如果没有阅读的话.
基本上,我在单列垂直滚动页面中有部分内容.当第一个标题的顶部(jsFiddle中的标题1)到达屏幕顶部时,向下滚动页面,它将粘在顶部,直到你到达下一个标题(标题2),在"标题"当你滚动时,2"将保持其位置,并且"标题1"将被推出现场,对于其余的标题也是如此.
当向上滚动页面时,反向会发生,例如......"标题4"将保持原位,当达到"标题3"内容的底部时,"标题3"将无缝地显示在"标题4"上方并保持在屏幕的顶部,直到它达到自己的内容的顶部.
我想用HTML/CSS创建这个,Mootools 1.3作为我选择的JavaScript库.
有关如何做到这一点的任何想法？干杯.
有谁知道如何在滚动固定标题上制作多个？我检查答案，如本。
这正是我想要的，但我希望该标题在另一个标题之前停止，并且当第一个标题滚动经过第二个标题时，第二个标题应该占据第一个标题的位置并停留在屏幕的最顶部。但是它们对我不起作用，因为它们使用的是我不使用的库（jQuery 等），而且它们过于复杂。我试过这样做，我getBoundingClientRect()只用 2 个标题就可以使用它。我在这里提供了 HTML&CSS 部分：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
@import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
letter-spacing: 3px;
margin: 0;
padding-left: 10px;
padding-top: 10px;
color: #fff;
font-weight: 100;
}
.header {
width: 100%;
height: 50px;
}
.header:nth-of-type(1){
background-color: dodgerblue;
position: fixed;
}
.header:nth-of-type(2){
background-color: rebeccapurple;
}
.header:nth-of-type(3){
background-color: chartreuse;
}
.content {
width: 100%;
height: 100%;
background: linear-gradient(70deg, orange, crimson);
padding-top: 50px;
}<header class="header"><h1>HEADER 1</h1></header> …