使頁面頂部的第一部分位於頂部

Question

在我的頁面中有兩個部分，一個標題div和內容div。我希望JS或jquery解決方案將頂部部分粘貼在頂部，這樣當用戶滾動內容部分時就會跨越並覆蓋標題部分。

HTML：

<div id="header"> 
    <h3>I'd like to stick here at the background, please! </h3> 
</div> 
<div id="content"> 
    <h3>I'd like to cross over the header when user scrolls.</h3> 
</div> 

http://jsfiddle.net/KNh46/

Answer 1

更新：誤會了，所以你想要的內容滾動超過的標題，而不是在之下。那麼就應該是這樣的：

#header { 
    position: fixed; 
    height: 100px; 
    top: 0; 
    z-index: 100; 
} 

#content { 
    position: relative; 
    margin-top: 100px; 
    z-index: 101; 
} 

在這裏看到一個例子：http://jsfiddle.net/aorcsik/v7zav/

---

如果你的頭是固定的高度，說100px，則：

#header { 
    position: fixed; 
    height: 100px; 
    top: 0; 
} 

#content { 
    margin-top: 100px; 
} 

這樣，當滾動到頂部，標題不會覆蓋內容，但是當您開始向下滾動時，它會。

Answer 2

你應該添加CSS：

*{margin:0;padding:0} 
#header{ 
    position:fixed; 
    width:100%; 
    height:200px; 
    background:#ccc; 
} 
h3{ 
    text-align:center; 
} 

#content{ 
    background:#f1f1f1; 
    padding-top:200px; 
    min-height:500px; 
} 

jsfiddle

Answer 3

這樣的事情，如果我明白你的問題：

<div id="content_wrapper" style="position:relative"> 
    <div id="header" style="z-index:1; position:absolute; top:0px"> 
     <h3>I'd like to stick here at the background, please! </h3> 
    </div> 
    <div id="content" style="z-index:5"> 
     <h3>I'd like to cross over the header when user scrolls.</h3> 
    </div> 

</div> 

Answer 4

我對我沒有任何問題的項目使用https://github.com/bigspotteddog/ScrollToFixed。 ScrollToFixed允許您根據滾動位置設置div的固定時間。

撥弄例如：jsfiddle.net/ZczEt/167/

Answer 5

我自己想出了另一種解決方案：

添加另一個div容器的標題，然後該div到固定位置，使內容是絕對的。但這種方式，你需要指定一個最小高度或高度爲頭：

http://jsfiddle.net/pna54/

<div id="header"> 
    <div class="container"> 
     <h3>I'd like to stick here at the background, please! </h3> 
    </div> 
</div> 
<div id="content"> 
    <h3>I'd like to cross over the header when user scrolls.</h3> 
</div> 

CSS：

div{margin:0;padding:0} 

    h3{ 
     padding:0;margin:0; 
     padding-top: 100px; 
     padding-bottom:100px; 
     text-align:center; 
    } 

    #header{ 
     background:#ccc; 
     min-height:200px; 
     width:500px; 
     position:relative; 
    } 
    .container{ 
     position:fixed; 
     width:100%; 
     max-width:500px; 
    } 
    #content{ 

     background:#f1f1f1; 
     min-height: 500px; 
     position: absolute; 
     width:500px; 
    } 

http://jsfiddle.net/pna54/