爲內容背後的標題留下空隙

我試圖製作一個帶有橫幅的網頁，這樣當您滾動內容時，它會從底部開始並保持粘貼在橫幅的上半部分。爲內容背後的標題留下空隙

我立刻想出了一個簡單而又醜陋的想法，即內容框會有大小的屏幕，一個大的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

爲內容背後的標題留下空隙

回答

相關問題