javascript - 为内容后面的标题留空

Question

我正在尝试制作一个带有横幅的网页，这样当您滚动时，内容会从底部出现并一直停留在横幅的上半部分下方。

我立即想到了一个简单而丑陋的想法，即内容框将具有屏幕大小，一个大的 margin-top 和 overflow-y: scrolling，但正如我所说...这将是一种丑陋的方式。

因此我的主要问题是要实现这一点并且仍然只有一个滚动条。我认为 header 必须是 position: fixed...有人有 css/更适合移动设备的想法吗？

编辑:

根据要求使用 JSFiddle:http://jsfiddle.net/r2gbyjcs/

Answer 1

开始之前

请注意，编码中没有“花哨”或“不花哨”之类的东西。事实上，如果我要定义“花哨”，我会将其描述为“不必要”。因为如果你想要的只是获得相同的结果，但付出了大量的努力，那只是在浪费你的时间。您的目标是创建最快、最流畅的实现，而不是将花哨的代码隐藏在面纱之后。

解决方案

解决方案是将页眉分为 2 个 div:Top 和 Bottom。使它们具有相同的背景以难以区分，但使顶部具有 z-index: 0 而底部具有 z-index: -1。然后，拆分顶部和底部之间的高度，然后调整内容的 margin-top。

HTML:

<header>
    <div id="top">Hotel</div>
    <div id="bottom">Bottom half</div>
</header>
<div id="content">
    <h1>Best Shawarma in the world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1>Best Shawarma in the world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1>Best Shawarma in the world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1>Best Shawarma in the world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1>Best Shawarma in the world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1>Best Shawarma in the world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS:

body {
    margin: 0px;
}
header #top{
    height: 100px;
    background-color: #fb3f26;
    position: fixed;
    top: 0px;
    left:0px;
    right: 0px;
}
#content {
    background-color: #e0ecf3;
    padding: 20px;
    margin-top: 200px;
}

header #bottom{
    height: 200px;
    background-color: #fb3f26;
    position: fixed;
    z-index: -1;
    top: 0px;
    left:0px;
    right: 0px;
}

JSFiddle Demonstration