Html 定位滚动div

我再来问你一个问题。我有一个由三个元素组成的徽标：文本|徽标|文本。徽标部分是静态的。它应该总是水平+垂直居中。我是在有背景的情况下完成这项工作的。这两个文本部分需要能够上下滚动，当它离开页面顶部时，一个新版本应该从页面底部出现，并停止在与徽标完全对齐的位置

我的桌面分辨率为1920*1080，在我自己的桌面上可以很好地工作。然而，我已经做了这个槽填充和像素

#logo {
background:none;
padding-top:411px;
}
#logo2 {
background:none;
padding-top:958px;
}
#logo3 {
background:none;
padding-top:962px;
}  

显然，这不是一种方式，因为在任何其他分辨率上，对齐都是完全不正确的

我已经创建了一个JSFIDLE：

由于小提琴在较小的屏幕上显示输出，您已经看到了我的问题。我很确定我在这里遗漏了什么。有没有人能给我指出一个正确的方向，告诉我怎么做

亲切问候,，

---

阿扬

试试这件衣服的尺寸：

我将

#部分

s的高度设置为视口的100%（在将

html

、

body

和

容器流体

设置为100%高度后）。然后，我将每个

#徽标

从顶部偏移50%，顶部留有（大约）图像高度的一半。我对最后一个

#logo

做了一些时髦的调整，使其精确到视口的高度，这样滚动条就正好停在第三部分窗口的底部。以下是CSS（稍微重新组织）：

---

我不确定这可以在纯css中完成。我可能错了，但看起来您可能想查看$（window.height（）；和$（窗口）。滚动（）；=>window.pageyoffset绝对精彩。事实上，我只是在玩弄百分比，不过只是在子元素上。没有考虑设置父元素。非常感谢你！太棒了！

html {
    height: 100%;
}
body {
    background: url(http://i.imgur.com/5rFLWpS.png) repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
.container-fluid {
    height: 100%;
    width: 100%;
}
#sectionone, #sectiontwo, #sectionthree {
    height: 100%;
    width: 100%;
}
#logo {
    background:none;
    position: absolute;
    top: 50%;
    margin-top: -72px;
}
#logo2 {
    background:none;
    position: absolute;
    top: 150%;
    margin-top: -72px;
}
#logo3 {
    background:none;
    position: absolute;
    top: 250%;
    margin-top: -72px;
    bottom: 300%;
    margin-bottom: -72px;
}