floating layer 1

TheConeHead · Oct 19, 2005

I know I have seen this before, but I need a script where I can have a layer float say 100px below the top of the browser, then as people scroll the window down, when that layer gets to the top of the window, it will stay there....

make sense?

[conehead]

cLFlaVA · Oct 19, 2005

take a look at

http://www.javascript-fx.com/scriptclips/float/stay_tl.html

just do a view > source.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

TheConeHead · Oct 19, 2005

no here is my only issue... that is exactly what I need EXCEPT when someone scrolls, the layer should stay at the top of the browser, not 100px below...

anyway to adjust this script for that?

[conehead]

cLFlaVA · Oct 19, 2005

just change the startY.

Code:

startY = 0;

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

TheConeHead · Oct 19, 2005

But here's the thing... I want it to start at 100px and only go and stay at 0 if someone scrolls down ....

[conehead]

cLFlaVA · Oct 19, 2005

is this what you mean?

Code:

<html>
<head>
<title>Floating Div (Top Left)</title>
</head>
<body bgcolor="#000000">
<!-- ********************************************************* -->
     * You may use this code for free on any web page provided that 
     * these comment lines and the following credit remain in the code.
     * TopLeft Floating Div from [URL unfurl="true"]http://www.javascript-fx.com[/URL]
     ********************************************************  -->
<div id="divStayTopLeft" style="position:absolute">
<img src="javascriptfx.gif"/>
</div>
<script type="text/javascript">
function JSFX_FloatTopLeft()
{
	var startX = 10, startY = 100;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	var px = document.layers ? "" : "px";
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
		el.x = startX; el.y = startY;
		return el;
	}
	window.stayTopLeft=function()
	{
		var pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
		[red]startY = (pY > 100) ? 0 : 100 - pY;[/red]
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 40);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopLeft();
</script>
<!-- ********************************************************* -->

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<!-- ********************************************************* -->
</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

floating layer 1

TheConeHead

Programmer

cLFlaVA

Programmer

TheConeHead

Programmer

cLFlaVA

Programmer

TheConeHead

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor