I’m trying to create a menu that is initially static, but after the page has been scrolled down to a certain point, the menu then “hovers” and scrolls with the page scroll. So in other words, it starts off as position “static” and then dynamically turns to “fixed” if certain conditions are met.
…or at least this is what I’m trying to do…
I’m having problems making the menu stay with the given amount of scrolled content. In all honesty, I think it’s the math that’s kicking my butt in this but I might be wrong–there’s a good amount of variables in this. I think once you see the page, you’ll see what I’m trying to do here (and please remember that I’ve been working on this in FF 3.6–I still have yet to get to IE flavors, etc).
Long story short: The menu stays at the top at first and then pops down where afterwards, it THEN begins to scroll with the content. The position it pops down to is the position I need it to start at until I scroll down to it where upon it should then begin to scroll with the content. How do I make it do this? The big gray area is the header and the menu should start at the bottom of that but then scroll down with the page when the top of the window’s viewport meets the top of the menu…
Any help on this would be VERY appreciated… It’s driving me bonkers. 
Below is my code…
index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Menu Test</title>
<style type="text/css">
*{border:0;margin:0;padding:0;}
body{height:100%;color:#000;font:0.8em Arial,Helvetica,Sans-Serif;}
a{color:#030;text-decoration:none;}
a:hover{color:#096;}
.current_page_item a{color:#096;}
input,select,textarea{border:#999 1px solid;font-size:12px;padding:2px;}
select{padding:0;}
li{list-style:none;}
input[type="submit"]{cursor:pointer;background:#fff;}
input[type="submit"]:hover{color:#036;}
/*========= LAYOUT =========*/
#w{height:100%;}
* html #w{}
#page{background:transparent;margin:0 auto;width:960px;}
/*--- Main Columns ---*/
#columns{margin:0;padding:0 15px 25px;}
.col1{float:left;width:550px;}
.col2{float:right;width:350px;}
/*--- Sub Columns ---*/
.subcol{width:160px;}
.subcol h2{color:#030;font-size:14px;padding:0 0 10px;}
/*========= HEADER =========*/
#header{position:relative;float:left;padding-bottom:60px;width:100%;background:gray;}
#top{width:100%;float:left;text-align:right;}
#top ul li{display:inline;}
#top ul li a{padding:0.5em;color:#fff;}
#middle{padding-top:2em;padding-bottom:1em;width:100%;height:100px;float:left;}
#middle #logo{width:25%;display:inline;float:left;}
#middle #logo img{text-align:center;}
#middle #title{width:75%;display:inline;float:right;text-align:center;}
#middle #title h1{padding-top:0.5em;padding-bottom:0.3em;width:100%;letter-spacing:0.7em;clear:both;float:left;text-align:center;}
#middle #title h1 a{display:block;color:#fff;}
#middle #title p{width:100%;letter-spacing:0.5em;clear:both;text-align:center;}
#middle #title p a{display:block;font-style:italic;font-weight:bold;color:#fff;}
#bottom{border-top:1px solid #000;position:absolute;left:0;bottom:0;width:960px;height:60px;background:black;}
#bottom ul{margin-top:5px;}
#bottom ul li{display:inline;}
#bottom #links{border-left:1px solid #000;width:699px;height:30px;display:inline;float:left;background:#fff;}
#bottom #links ul li a{padding:0.5em;font-size:1.2em;font-weight:bold;}
#bottom #search{border-right:1px solid #000;width:259px;height:30px;display:inline;float:right;background:#fff;}
#bottom #search input[type="text"]{border:1px solid #000;margin-top:5px;margin-right:5px;width:90%;height:100%;float:right;}
#bottom #search input[type="text"]:hover{}
#bottom #sub_links{border-top:1px solid #000;padding-top:1em;width:100%;height:30px;float:left;font-style:italic;}
#bottom #sub_links ul{margin-top:-0.5em;padding-bottom:0.5em;}
#bottom #sub_links ul li{display:inline;}
#bottom #sub_links ul li a{padding:0.5em;font-weight:bold;color:#fff;}
#bottom #sub_links ul li a:hover{color:#096;}
#footer{position:fixed;left:10%;bottom:0;width:80%;height:30px;text-align:center;}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="top">
<ul>
<li><a href="#">Register</a></li>
<li><a href="#">Log in</a></li>
<li><a href="#" title="Subscribe to the RSS Feed">RSS</a></li>
<li><a href="#" target="_blank" title="Subscribe to the E-mail RSS Feed">E-MAIL RSS</a></li>
<li><a href="#"><img src="#" alt="" /></a></li>
</ul>
</div>
<div id="middle">
<div id="logo">
</div>
<div id="title">
<h1><a href="#" title="Title">Title</a></h1>
<p><a href="#" title="sub">Sub</a></p>
</div>
</div>
<div id="bottom">
<div id="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Blah">Blah</a></li>
<li><a href="#" title="Lorem">Lorem</a></li>
<li><a href="#" title="Ipsum">Ipsum</a></li>
</ul>
</div>
<div id="search">
<form method="get" id="searchform" action="#">
<input type="text" value="Enter your search keywords here..." onclick="this.value='';" name="s" id="s" />
</form>
</div>
<div id="sub_links">
<ul>
<li><a href="#" title="#">Lorem Ipsum 1</a></li>
<li><a href="#" title="#">Lorem Ipsum 2</a></li>
<li><a href="#" title="#">Lorem Ipsum 3</a></li>
<li><a href="#" title="#">Lorem Ipsum 4</a></li>
<li><a href="#" title="#">Lorem Ipsum 5</a></li>
<li><a href="#" title="#">Lorem Ipsum 6</a></li>
</ul>
</div>
</div>
</div>
<div id="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="footer"></div>
</div><!--/page -->
<script type="text/javascript" src="slider.php"></script>
</body>
</html>
slider.php:
<?php
echo '
var NS6 = (document.getElementById&&!document.all);
var IE = (document.all);
var NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4");
var yoffset=0;
var lastY=0;
var staticyoffset=160;
if(NS6){
var menu=document.getElementById("bottom").style;
}else if(IE){
var menu=document.all("bottom").style;
}else if(NS){
var menu=document.layers["bottom1"];
}
menu.top = 0;
function makeStatic(){
if(NS||NS6){scrollstart = window.pageYOffset;}//The position of the top-left corner of the viewport (amount of scroll)...
if(IE){scrollstart = truebody().scrollTop;}
if(scrollstart!=lastY&&scrollstart>yoffset-staticyoffset){
smooth = .2 * (scrollstart - lastY - yoffset + staticyoffset);
}else if(yoffset-staticyoffset+lastY>yoffset-staticyoffset){
smooth = .2 * (scrollstart - lastY - (yoffset-(yoffset-scrollstart)));
}else{
smooth=0;
}
if(smooth > 0){
smooth = Math.ceil(smooth);//rounds upward to nearest integer...
}else{
smooth = Math.floor(smooth);//rounds downward to nearest integer...
}
if(NS6){menu.top=parseInt(menu.top)+smooth+"px";}//dynamic "top" value...
if(NS){menu.top=parseInt(menu.top)+smooth;}
if(IE){menu.pixelTop+=smooth;}
lastY = lastY+smooth;//Prevents infinite slide-down...
document.getElementById(\\'footer\\').style.backgroundColor = "black";
document.getElementById(\\'footer\\').style.color = "white";
document.getElementById(\\'footer\\').innerHTML = "<p>scrollstart = "+scrollstart+" menu.top = "+menu.top+" lastY = "+lastY+" smooth = "+smooth+" yoffset = "+yoffset+" staticyoffset = "+staticyoffset+"</p>";
setTimeout(\\'makeStatic()\\', 1);
};
function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body;//if transitional, then we use d.dEl... else use d.body...
};
makeStatic();';
?>
