Announcement

**Vladdy** · Jul 3, 2002, 09:44 AM

Common approach is to use frames.

You can make a "content" division with
position: absolute;
overflow: scroll;
and resize it every time the browser window is resized so it stays
within the client window.

Once M$ gets their, you know what, together and makes a CSS2 compliant browser the answer would be
position: fixed

**ip23** · Jul 3, 2002, 09:49 AM

Just out of curiousity how would I get it to work in some browsers? just add that style to the layer?

**adios** · Jul 3, 2002, 05:38 PM

Alternate method:

<html>
<head>
<title>untitled</title>
<style type="text/css">

#menu {
font: 800 36px monospace;
background: sienna;
border: 3px tan double;
}

#container {
position: relative;
top: 0px;
}

</style>
<script type="text/javascript" language="JavaScript">

var menu_el = null;
var menu_offset = 0; //distance from page top - match to #container top: (CSS)

function getEl(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] : null;
}

function moveToY(el) {
if (typeof document.all != 'undefined')
el.style.top = parseInt(document.body.scrollTop) + menu_offset;
else if (typeof document.getElementById != 'undefined' &&
typeof window.pageYOffset != 'undefined')
el.style.top = pageYOffset + menu_offset;
else if (el.pageY) el.pageY = pageYOffset + menu_offset;
}

function menu_static() {
menu_el = getEl('container');
if (typeof window.onscroll != 'undefined' && menu_el)
onscroll = function() {
moveToY(menu_el);
}
else if (document.layers) setInterval('moveToY(menu_el)',10);
}

onload = menu_static;

</script>
</head>
<body>
<div align="center">
<div id="container">
||||||||||||||||||||||||
</div>
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ 
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ 
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ 
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ 
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ 
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ 
</div>
</body>
</html>

Announcement

Layer on top

Layer on top

Comment

Comment

Comment