Scroll down but not the top row.

[rline101]

Is it possible to make a row of php output, stay fixed at the top of the screen? So that when the page scrolls down, the top row stays fixed but the other rows scroll?

[AndyB]

HTML frames would work for this.  There may be some fancy dHTML alternatives.

[rline101]

Is there a way to do it without frames? I did consider it, but the info in the top row and the info in the other rows is all coming from the same mysql database, so I don't think frames would work.

[AndyB]

It doesn't matter where the information comes from, it's where you display it that matters. 

[ToonMariner]

you could use css.

 

'position: fixed' is the bunny but it don't work in ie 6 or less (it decides to render as position: absolute instead);

 

The javaascript solution does exist as andy suggest...

 

here is my effort

keepVisible	=	function (id)
{
var	el				=	document.getElementById(id);
var	getScrollTop	=	function()
{
	return document.body.scrollTop||document.documentElement.scrollTop
};
el.keepInView	=	function()
{
	var target	=	getScrollTop();	
	var curY		=	el.offsetTop;

	var curY	=	el.offsetTop;
	var newY	=	null;
	newY	=	curY + ((target - curY)/20);
	newY	=	Math.ceil(newY);
	if	(
		newY	==	null
		)
	{
		newY	=	target;
	}
	el.style.top	=	newY + 'px';
}
setInterval('document.getElementById("' + id + '").keepInView()',10);
}

 

all you need is

 

	<script type="text/javascript">
		keepVisible('yourelement');
	</script>

directly after the element you want to keep at the top. (should be able to call it on the body onload attribute but I encountered a couple of browsers that didn't play ball)

 

The above will make you element 'glide' into view. If you want it to just shift immediately then simply set newY = target instead of the

 

newY = curY + ((target - curY)/20);

newY = Math.ceil(newY);

 

lines.