Grid 960 - Stick the Header_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-12 03:45 出处：网络

I\'m using the 960gs and i want my Header & navigation bar to be sticky at the top. I\'ve tried to stick the div\'s using the position:fixed.

相关专题：960.gs css

I'm using the 960gs and i want my Header & navigation bar to be sticky at the top. I've tried to stick the div's using the position:fixed. Result: The Whole 960 grid messed up.

<!-- 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>
开发者_如何学JAVA
.stick{
position:fixed;    
}

Ideas?

Use a wrapper like such:

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

and make the div#nav fixed top, and it works. You might want to give the div#content a margin push with the height of the navbar for a better scroll effect.. Remember this doesn't work on handhelds so use a framework if needed

This jsfiddle shows how it should work... http://jsfiddle.net/s5syC/

Adding z-index:-length-; on the header would help, but I'm trying to find a better solution.