Floating Layer 1

 
As the window is scrolled the menu on the left will float keeping itself in view.
My example shows a floating menu although the div could contain anything you wish to keep in view.

<script type="text/javascript">

// www.huntingground.freeserve.co.uk

var moz=document.getElementById&&!document.all

function initMenu(){
defPosTop=parseInt(document.getElementById("layer_cont").style.top)
motion()
}

timer=""

function motion(){
clearTimeout(timer)
step=15
distance=(document.body.scrollTop+defPosTop) - parseInt(document.getElementById("layer_cont").style.top)
divTop=parseInt(document.getElementById("layer_cont").style.top)
if(divTop<=(document.body.scrollTop+defPosTop)){
if(distance>150){step=20}
if(distance<20){step=1}
divTop+= step
document.getElementById("layer_cont").style.top =divTop
}

if(divTop>=(document.body.scrollTop+defPosTop)){
if(distance< -150){step=20}
if(distance> -25){step=1}
divTop-= step
document.getElementById("layer_cont").style.top =divTop
}

timer=setTimeout("motion()",50)
if(divTop<=(document.body.scrollTop+defPosTop)+1 &&divTop>=(document.body.scrollTop+defPosTop)-1){

if(!moz){ // onscroll event is not fired when using mouse wheel to scroll page in MOZ
clearTimeout(timer) // therefore only clear timer in IE
}

}

}

window.onscroll=motion

// add onload="initMenu()" to the opening BODY tag

</script>

<DIV id="layer_cont" class="c1" style="position:absolute;width:100px;border:1px solid #808080">

Contents

</DIV>