Question

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

我立即提出了一个简单而丑陋的想法，即内容框的大小与屏幕一样大margin-top和overflow-y: scrolling，但正如我所说......它会是丑陋的方式。

因此，我的主要问题是实现这一目标，并且仍然只有一个滚动条。我认为标题必须是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

Answer 2

您可以制作标题a++，使其固定到位并从布局流程中取出。然后将position:absolute添加到内容框以补偿标题的高度。

Answer 3

我会建议这样的事情，但这不是最好的方式：

HTML

 <header id="header1">
    <div>Hotel</div>
</header>
<header id="header2">

</header>
    <div id="content">
    ...

CSS

#header1 {
    height: 25px;
    background-color: #fb3f26;
    position: fixed;
    top: 0px;
    left:0px;
    right: 0px;
    z-index: 1;
}
#header2 {
    height: 300px;
    background-color: #fb3f26;
    position: fixed;
    top: 0px;
    left:0px;
    right: 0px;
    z-index: -1;
    min-height: 25px;
}

Answer 4

我认为一种简单的方法就是使用position:fixed作为标题/横幅。然后编辑z-index，使横幅位于内容框后面，标题位于内容框上方。您可以使用margin-top来偏移标题/横幅的高度。

http://jsfiddle.net/haydensmack/r2gbyjcs/6/

留下内容背后的标题的差距

4 个答案: