Question

我正在使用960gs，我想要我的Header＆amp;导航栏在顶部是粘性的。我试图用位置坚持div：固定。结果：整个960网格搞砸了。

<!-- Header-->

<div class="container_12 stick">
<div class="grid_6 alpha ">
... 
</div>

<div class="grid_6 omega">
...
</div>

</div>

<!-- NavBar->
<div id="nav" class="container_12 stick">

 <div class="grid_2 alpha prefix_4" >   
    <h1><a href="#whoami">...</a></h1>
 </div>

 <div class="grid_2 button textAlignC"> 
    <h1><a href="#works">...</a></h1>
 </div>

 <div class="grid_2 button textAlignC"> 
    <h1><a href="#hobbies">...</a></h1>
 </div>

 <div class="grid_2 omega button textAlignC">   
    <h1><a href="#contacts">...</a></h1>
 </div> 

</div>

.stick{
position:fixed;    
}

想法？

Answer 1

使用这样的包装：

<html>
    <head>stuff</head>
    <body>

        <div id="nav">
            <div class="container col_12">
            </div>
        </div>
        <div id="content">
            <div class="container col_12">
            </div>
        </div>  

    </body>
</html>

并使div＃nav固定在顶部，并且它可以工作。您可能希望使用导航栏的高度为div＃content提供边距推送以获得更好的滚动效果。请记住，这不适用于手持设备，因此如果需要，请使用框架

Answer 2

这个jsfiddle展示了它应该如何运作...... http://jsfiddle.net/s5syC/

Answer 3

在标题上添加z-index:-length-;会有所帮助，但我正在努力寻找更好的解决方案。

Grid 960 - 坚持标题

3 个答案: