为内容背后的标题留下空隙

我试图制作一个带有横幅的网页，这样当您滚动内容时，它会从底部开始并保持粘贴在横幅的上半部分。为内容背后的标题留下空隙

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

因此，我的主要问题是要实现这一点，仍然有一个单一的滚动条。我认为标题必须是position: fixed ...有任何人的CSS /更多的移动友好的想法？

编辑：

作为请求的jsfiddle一起玩：http://jsfiddle.net/r2gbyjcs/

来源

2015-06-27 JulianWels

您可以加入一些代码或的jsfiddle，所以我们需要一些帮助？ –

如果你有JQuery，你可以使用JQuery动画 – DaemonOfTheWest

@HéctorEhttp://jsfiddle.net/r2gbyjcs/ – JulianWels

在我们开始

注意，有是不是“幻想”或“不适应”编码。事实上，如果我要定义“幻想”，我会把它形容为“不必要的”。因为如果你想要的只是达到相同的结果，但是投入了大量的努力，那只是浪费你的时间。您的目标是创建最快速和最流畅的实现，而不是将幻想代码放在幕后。

解

的解决方案是将头部分成2周的div：顶部和底部。使它们具有相同的背景以便区分，但是使顶部具有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

来源

2015-06-28 00:34:29 DaemonOfTheWest

你可以使头部position:absolute因此被固定在适当位置，并取出布局流程。然后将padding-top添加到内容框以补偿标题的高度。

来源

2015-06-28 00:04:58

我认为标题必须是'position：fixed'，我不能只设置填充，因为当你滚动它时，会稍后“过度滚动”一些像素。 – JulianWels

我建议这样的事情，但它不是最高档的办法：

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

来源

2015-06-28 00:20:17

我想一个简单的方法是只使用position:fixed页眉/旗帜。然后编辑z-index，使横幅位于内容框后面，并且标题位于内容框上方。您可以使用margin-top来抵消标题/标题的高度。

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

来源

2015-06-28 00:36:51

为内容背后的标题留下空隙

回答

相关问题