|
|
 |
The menu on the left keeps its position by floating as the window is scrolled. This example uses a table layout with the floating layer placed within the relative table cell. Adjustment of the top position of this div may be required to suit layout changes. This following code is for this table example, see also the div layout example
<HTML>
<HEAD>
<TITLE>Floating Layer 1</TITLE>
<script type="text/javascript">
var moz=document.getElementById&&!document.all
function initFloater(){
floatingLayer=document.getElementById("floater")
defPosTop=parseInt(floatingLayer.style.top)
floatLayer()
}
timer=""
function floatLayer(){
pageTop=(document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)
clearTimeout(timer)
step=15
distance=(pageTop+defPosTop)-parseInt(floatingLayer.style.top)
divTop=parseInt(floatingLayer.style.top)
if(divTop<=(pageTop+defPosTop)){
if(distance>150){step=20}
if(distance<20){step=1}
divTop+= step
floatingLayer.style.top =divTop+"px"
}
if(divTop>=(pageTop+defPosTop)){
if(distance< -150){step=20}
if(distance> -25){step=1}
divTop-= step
floatingLayer.style.top =divTop+"px"
}
timer=setTimeout("floatLayer()",50)
if(divTop<=(pageTop+defPosTop)+1&&divTop>=(pageTop+defPosTop)-1){
if(!moz){
clearTimeout(timer)
}
}
}
window.onscroll=floatLayer
// add onload="initFloater()" to the opening BODY tag
</script>
<style>
table{border:1px solid #8e8462;line-height:20px}
td{border:1px solid #c9bda9}
#floater{width:102px;color:#404000;font-size:12px;line-height:16px;padding:5px;border:1px solid #8e8462}
html>body #floater{width:90px}
</style>
</HEAD>
<BODY onload="initFloater()">
<center>
<table border="2">
<tr>
<td colspan="2" style="text-align:center">
<img src="image.jpg" style="width:536px;height:65px">
</td>
</tr>
<tr>
<td>
<img src="spacer.gif" style="width:102px;height:1px"><br>
<DIV id="floater" style="position:absolute;top:100px">
<a href="page.htm">Link</a><br>
<a href="page.htm">Link</a><br>
<a href="page.htm">Link</a><br>
<br>
<a href="page.htm">Link</a><br>
<a href="page.htm">Link</a><br>
<a href="page.htm">Link</a><br>
<br>
<a href="page.htm">Link</a><br>
<a href="page.htm">Link</a><br>
<a href="page.htm">Link</a><br>
<a href="page.htm">Link</a>
</DIV>
</td>
<td>
<div style="width:500px;height:1000px">
Example content
</div>
</td>
</tr>
</table>
</center>
</BODY>
</HTML>
|
