位置：固定垂直空间

Question

我的位置是固定的一个相当基本的问题。

这里有一个例子： http://jsfiddle.net/wxEsY/

我想是开始下面黑条（与固定位置）滚动。

任何帮助表示赞赏。

Regards

Answer 1

添加填充到第二个div等于第二个div的高度。

.content { 
    padding-top: 50px; 
    background: #ccc; 
    width: 100%; 
    height: 5000px; 
} 

当你说滚动背面的条形码下方，这听起来像你想的内容开始回栏的下方。所以添加一些填充到第二个div来说明固定div的存在。

Answer 2

这样做吗？

http://jsfiddle.net/Vqncx/

我只给从顶部相等的“内容” DIV相对定位和y轴给“nav”的高度，然后，得到“NAV”的z-index以保持它在'内容'之上。

.nav { 
width: 100%; 
height: 50px; 
background: #000; 
position: fixed; 
z-index: 5; 
} 

.content { 
background: #ccc; 
width: 100%; 
height: 5000px; 
position: relative; 
top:50px; 
} 

Answer 3

你只需要一顶边距添加到您的。内容的div等于.nav块的大小+一些填充：

.content { 
    margin-top: 60px; 
    background: #ccc; 
    width: 100%; 
    height: 5000px; 
} 

Answer 4

这里是实现这一那并不是一种更灵活的方式不需要知道固定div的高度（尽管它的语义较少）。

只需复制固定元素的标记。将第一个重复对的position设置为fixed，将第二个的visibility设置为hidden（还要确保第二个元素的position未设置或relative）。这里有一个例子：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #000; 
 
} 
 
.fixed{position:fixed} 
 
.filler{visibility:hidden} 
 

 
.content { 
 
    background: #ccc; 
 
    width: 100%; 
 
}

<div class="nav fixed"></div> 
 
<div class="nav filler"></div> 
 
<div class="content"> 
 
    
 
    First<br /> 
 
    Second<br /> 
 
    Third<br /> 
 
    Fourth<br /> 
 
    Fifth<br /> 
 
    Sixth<br /> 
 
    Seventh<br /> 
 
    Eigth<br /> 
 
    Ninth<br /> 
 
    
 
    <br /><br /><br /><br /> 
 
    <br /><br /><br /><br /> 
 
    <br /><br /><br /><br /> 
 

 
    Last<br /> 
 

 
</div>