Make a div follow page scroll - the continued

k-knudsen · #1 (**permalink**) 07-23-09, 06:18 PM

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

DaiLaughing · #2 (**permalink**) 07-24-09, 04:37 AM

I didn't see the original thread and I don't quite understand it. Is it OK if the menu stays in exactly the same position on the screen regardless of the other content? This would mean that other content would appear to scroll under the menu and be obscured but it does work VERY easily and on IE8. Just style the DIV the menu is in with:

Code:

position:fixed;
left:50px;
top:50px;

k-knudsen · #3 (**permalink**) 07-24-09, 05:00 AM

Hi DaiLaughing

Thanks for the quick reply!

the function of this scroll is:

on page load: the "menu" will be 200px from the page top.

when user scrolls down it will not move until there is a 30px distance - and then move with the page

if you have ietester, then try to test it

Ie7 get's it! but ie8 does not work :/

Thanks again for the reply

Kenneth

DaiLaughing · #4 (**permalink**) 07-24-09, 05:04 AM

I can see why it got complicated then. The fixed positioning solution is so easy and fast is there any chance you might be happy with how that works? Then there is no javascript to slow things down or add compatibility issues.

k-knudsen · #5 (**permalink**) 07-24-09, 05:09 AM

your right! i would be easy, the only problem is this:

screen size and page size. my new site has from pagetop to actual content 620px. if the menu is 350px long it would be 970px - and the menu would be very far down. this means that users with 1024*768 can't see the menu correctly :/

DaiLaughing · #6 (**permalink**) 07-24-09, 05:37 AM

I agree that is the problem with almost any fixed layout. There are still people using 800x600 as well which would be even worse.

I'm guessing you are set on the layout but another suggestion just in case. Could the content scroll rather than the page? Then the header and the menu would always be there.

Hopefully someone else will give you a way to do what you want but it's beyond my very limited Javascript abilities.

k-knudsen · #7 (**permalink**) 07-24-09, 06:05 AM

Thanks for the advice

i'm all set on a specific layout, the only problem now is ie8 support :/

The content scroll sounds interesting! but i'm holding on to my layout

what i did find on the original post was a support for ie6 and 5.5 -- credit goes to Yeroon:

Code:

<!--[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]-->

k-knudsen · #8 (**permalink**) 07-25-09, 04:38 AM

use this line for ie8 hack. it emulates ie7
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />