Thread: Make a div follow page scroll - the continued
View Single Post
  #1 (permalink)  
Old 07-23-09, 05:18 PM
k-knudsen's Avatar
k-knudsen k-knudsen is offline
Newbie Coder
  
Join Date: Jan 2004
Location: Denmark
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Make a div follow page scroll - the continued
Hi !

this is the part 2 of the "make a div follow page scroll".

the original thread: http://www.hotscripts.com/forums/jav...croll-how.html

the problem: no ie8 support anybody knows how to fix this ?

Test server: http://limitededition.dk/test.html

here is the souce code. it's copy & paste ready feel free to use the code on your own projects

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->

<html>
	<head>
		<style type="text/css">
		#fixme { 
			margin-top: 30px;
			width: 200px;
			background-color: blue;  
			top:200px;
			margin-left: 400px
		}
		#wrap {width: 600px; margin: 0 auto; background-color: #333;}
		div > div#fixme { position: fixed; }
		
		pre.fixit { 
			overflow:auto;
			border-left:1px dashed #000;
			border-right:1px dashed #000;
			padding-left:2px; }
			
		#header {
			background-color: gray;
			top:200px;
			left:20px;
			height:200px;
		}
		</style>
		
		<!--[if gte IE 5.5]><![if lt IE 7]>
			<style type="text/css">
			div#fixme {
				right: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
				top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
			}
			
		</style>
		<![endif]><![endif]-->
	<script type="text/javascript">
		function reposition(){
			var el = document.getElementById('fixme');
			
			var ScrollTop = document.body.scrollTop;
			if (ScrollTop == 0)
			{
				if (window.pageYOffset)
					ScrollTop = window.pageYOffset;
				else
					ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
			}
			if(ScrollTop < 200)
				el.style.top = 200 - ScrollTop + "px";
			else
				el.style.top = "0px";
		}
	</script>
	
	
</head>
	<body onscroll="reposition()">
	<div id="wrap">
<div id="header">
	header
</div>

<div id="content">
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>


	<div id="fixme">
		http://www.hotscripts.com/forums/javascript/52088-make-element-follow-page-scroll-how.html
	</div>

</div>
</div>

</body>
</html>
/Kenneth
Reply With Quote