Hade en liten stund över så här får du ett exempel på svd-menyn, enligt den princip onkelborg beskrev:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Scrolltest</title>
<style>
body { margin: 0 auto; width: 600px; }
#nav { background: #800; list-style: none; margin: 0; overflow: hidden; padding: 0; position: static; width: 600px; }
#nav li { display: inline; }
#nav li a { background: #800; color: #fff; float: left; padding: 5px 10px; text-decoration: none; }
#nav a:focus, #nav a:hover { background: #000; }
</style>
</head>
<body>
<h1>Testsida</h1>
<ul id="nav">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in risus risus, non dignissim magna. Nam nibh mi, condimentum ac vestibulum in, mattis sit amet velit. Donec pretium consequat convallis. Maecenas tincidunt felis eu nibh vestibulum sollicitudin. Pellentesque gravida risus nec metus consectetur ullamcorper. Etiam in mauris velit. Aenean nec pharetra ligula. Phasellus mattis placerat molestie. Mauris id erat nisi, non iaculis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam porttitor facilisis pharetra.</p>
<p>Nullam venenatis leo ut eros condimentum eget faucibus libero pretium. Praesent rutrum interdum aliquet. Sed non odio sapien, ac laoreet justo. Curabitur quis lectus a velit rutrum sagittis a elementum orci. Phasellus neque leo, elementum quis sollicitudin id, imperdiet quis dui. Mauris dictum ligula id massa dapibus ac vestibulum magna sagittis. Curabitur tincidunt ligula a risus venenatis non elementum ante rhoncus. Phasellus vel odio non metus rutrum dapibus id vel nisl. In hac habitasse platea dictumst. Nullam dapibus consequat ligula, ac vulputate nulla convallis sed. Nullam a porttitor tellus. Sed eget elit ac massa imperdiet pellentesque et sit amet sem.</p>
<p>Ut posuere ligula scelerisque felis sagittis vestibulum. Vivamus mollis volutpat risus, quis eleifend odio pretium quis. Nam adipiscing, dolor eu sagittis venenatis, magna orci pulvinar nunc, eget eleifend tortor nibh et metus. Proin nec eros tortor. Pellentesque mollis imperdiet sapien, varius bibendum urna aliquet quis. Proin tristique adipiscing lorem non interdum. Phasellus tristique metus a erat bibendum posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis lectus eu eros pellentesque luctus. Pellentesque nisi elit, faucibus id consectetur et, dignissim in orci. Praesent felis tellus, sollicitudin nec elementum in, pharetra in justo. In a lorem at nibh porta vestibulum. Aenean turpis lacus, elementum at fringilla vehicula, blandit a elit. Aliquam faucibus volutpat orci, non iaculis justo tempus non. Etiam at tortor quis risus posuere placerat sit amet porta nisi. Nam ac sem eget quam cursus imperdiet. Praesent pretium magna ut lacus tempus eget tincidunt orci gravida. Donec orci leo, suscipit a congue at, varius eget mi. Nullam at turpis vel velit aliquet dignissim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in risus risus, non dignissim magna. Nam nibh mi, condimentum ac vestibulum in, mattis sit amet velit. Donec pretium consequat convallis. Maecenas tincidunt felis eu nibh vestibulum sollicitudin. Pellentesque gravida risus nec metus consectetur ullamcorper. Etiam in mauris velit. Aenean nec pharetra ligula. Phasellus mattis placerat molestie. Mauris id erat nisi, non iaculis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam porttitor facilisis pharetra.</p>
<p>Nullam venenatis leo ut eros condimentum eget faucibus libero pretium. Praesent rutrum interdum aliquet. Sed non odio sapien, ac laoreet justo. Curabitur quis lectus a velit rutrum sagittis a elementum orci. Phasellus neque leo, elementum quis sollicitudin id, imperdiet quis dui. Mauris dictum ligula id massa dapibus ac vestibulum magna sagittis. Curabitur tincidunt ligula a risus venenatis non elementum ante rhoncus. Phasellus vel odio non metus rutrum dapibus id vel nisl. In hac habitasse platea dictumst. Nullam dapibus consequat ligula, ac vulputate nulla convallis sed. Nullam a porttitor tellus. Sed eget elit ac massa imperdiet pellentesque et sit amet sem.</p>
<script>
(function() {
function getScrollHeight()
{
var h = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
return h ? h : 0;
}
var nav = document.getElementById("nav");
if (nav)
{
var initialTop = nav.offsetTop;
nav.style.top = 0;
window.onscroll = function() {
var h = getScrollHeight();
if (h > nav.offsetTop && h > initialTop)
nav.style.position = "fixed";
else
nav.style.position = "static";
}
}
})();
</script>
</body>
</html>
Förutom i IE6 då, där position: fixed inte fungerar, där är du shit out of luck. Precis som vanligt när det gäller IE6 :)
