Navigation sticky

HTML & CSS
1

Hi, I was looking around for a tutorial for a way to create the navigation stick to the top of the page whilst the rest of the content scrolls.

For example - Kriesi.at Theme Demos | Theme: Coalition

Anyone know of a way to do this or where I can find a tutorial I can follow?

2

I wouldn’t use the one in that example as the page is missing the horizontal scrollbar and will be an accessibility nightmare.

All you need do for IE7+ is use position:fixed and use left:0; top:0; right:0; and the height you need. Then just make sure the page content has padding top equal to the height of that fixed navbar or it will go under it.

Something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed position  using expressions for ie6</title>
<style type="text/css">
* html {/* fix jitters when using expression*/
	background-image: url(image.jpg);
}
body{background:green}
* {
	margin:0;/* for demo only*/
	padding:0
}
h1 {
	margin:0;
	text-align:center
}
#header {
	position:fixed;
	height:100px;
	background:blue;
	width:100%;
	left:0;
	top:0;
	overflow:hidden;
	z-index:2;
}
* html #header {
	position: absolute; /* position fixed for IE6 */
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
#content {
	background:green;
	position:relative;
	padding:110px 0 0 0;
	width:100%;
	position:relative;
	z-index:1;
}
p {
	padding:5px;
	margin:0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
	<h1>Fixed positioned Header <br />
		(using an expression for IE6)</h1>
</div>
<div id="content">
	<p>Start scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
	<p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
	<p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
	<p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
	<p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
		<p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
	<p>scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here scrolling content goes here </p>
</div>
</body>
</html>