Grid 960 - Stick the Header
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.
加载中,请稍侯......
精彩评论