Javascript 为落后于内容的标题留出空白

我试图制作一个带有横幅的网页，这样当你滚动时，内容会从底部出现，并一直贴在横幅的上半部分下面

我立刻想到了一个简单而丑陋的想法，内容框的大小与屏幕一样大，有一个大的

页边空白顶部
和
overflow-y:scrolling
，但正如我所说的那样……这将是一种丑陋的方式

因此，我的主要问题是实现这一点，仍然有一个单一的滚动条。我认为标题必须是
位置：fixed
…有人有css/更适合移动的想法吗？

编辑：

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

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

根据需要使用JSFIDLE:
您可以将标题设置为绝对位置，这样它就固定在适当的位置并从布局流中移除。然后将
padding top
添加到内容框中，以补偿页眉的高度
 我建议这样做，但这不是最好的方式：

HTML

开始之前

请注意，在编码中没有“花式”或“非花式”之类的东西。事实上，如果我给“幻想”下定义的话，我会把它描述为“不必要的”。因为如果你只想达到同样的结果，却要付出鲁布·戈德堡的大量努力，那只是浪费你的时间。您的目标是创建最快、最平滑的实现，而不是将花哨的代码隐藏起来

解决方案

解决方案是将标题分为两个部分：顶部和底部。使它们具有相同的背景以便无法区分，但使顶部具有
z-index:0
，而底部具有
z-index:-1
。然后，将顶部和底部之间的高度分开，然后调整内容的
页边顶部

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>

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

我认为一个简单的方法是只使用
位置：fixed
作为标题/横幅。然后编辑
z索引
，使横幅位于内容框后面，标题位于内容框上方。您可以使用
页边距顶部
偏移页眉/横幅的高度

您能添加一些代码或JSFIDLE以便我们可以使用吗？如果您有JQuery，您可以使用JQueryAnimation@HéctorE@DaemonOfTheWest你是什么意思？我刚刚发布了一个答案，不涉及Javascript，所有CSS。我认为标题必须是
position:fixed
，我不能只设置填充，因为当你滚动时，它会在一些像素后被“过度滚动”。