Question

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

我已经在我自己的桌面上完美地工作了，这是一个1920 * 1080分辨率。但是，我已经完成了这个槽填充和像素。

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

显然这不是要走的路，因为在任何其他分辨率上，对齐完全没有。

我创建了一个JSFiddle：http://jsfiddle.net/thedonny/mzr91b4f/

由于小提琴在较小的屏幕中显示输出，您已经看到了我的问题。我很确定我在这里遗漏了一些东西。有没有人可以指出我如何拉动这个？

亲切的问候，罗。

Answer 1

请尝试使用此尺寸：http://jsfiddle.net/mzr91b4f/2/

我将每个#section s视为视口高度的100％（将html，body和.container-fluid设置为100％高度后。然后，我使每个#logo s偏离顶部50％，边缘顶部（大约）图像高度的一半。我对最后一个#logo进行了一些时髦的调整，使其正好是视口的高度，因此滚动条完全停在第三节窗口的底部。这是CSS（有点重组）：

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;
}

定位滚动div

1 个答案: