make element follow page scroll ?! how-to

k-knudsen · #1 (**permalink**) 03-12-09, 06:10 AM

Hi PT Genius's

Did you ever see an effect you just could not remake or find ? well here is one of them!

I'm trying to make a portfolio site where theres alot of scrolling - so to make the site easy to navigate, I use Anchor links for every portefolio-case on the site. to make it even more easy for the user - it's combined with smooth scroll.. now for the difficult part:

The menu needs to scroll with the page - like on the dafont.com (look at the ad)

and on apple's store page store.apple.com/us/configure/MB940LL/A?mco=MTkzOTI1NQ (look at the Summary on the right).

I have only managed to replicate a bad version, this on my page limitededition.dk/test/referencer.html - the menu jumps and is not steady on the page.

does anyone here have suggestions, advice or an tutorial on this? any help would be extremely helpfull

Yeroon · #2 (**permalink**) 03-12-09, 07:05 AM

Hi There,

Does it need to change place for some header like in the apple store and after stay fixed? If it can be in fixed place all the time the below code will work. It uses a fix for IE which doesnt allow proper fixed positioning:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		#fixme { 
			position: absolute; 
			left: 0px; 
			top: 0px; 
		}
		#fixmetoo { 
			position: absolute; 
			right: 0px; 
			bottom: 0px; 
		}
		div > div#fixme { position: fixed; }
		div > div#fixmetoo { position: fixed; }
		
		pre.fixit { 
			overflow:auto;
			border-left:1px dashed #000;
			border-right:1px dashed #000;
			padding-left:2px; }
		</style>
		
		<!--[if gte IE 5.5]><![if lt IE 7]>
			<style type="text/css">
			div#fixme {
				left: 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' );
			}
			div#fixmetoo {
				right: auto; bottom: auto;
				left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
				top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
			}
		</style>
		<![endif]><![endif]-->

	</head>
	<body>


<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>


	<div id="fixme">
		fixed div 1
	</div>
	<div id="fixmetoo">
		fixed div 2
	</div>

</div>

</body>
</html>

k-knudsen · #3 (**permalink**) 03-12-09, 06:04 PM

Thank you so much yeroon!

That's exactly what i've been looking for!
i'm amazed how simple it looks

If it is not to much to ask for - could you help me to do the same as on apple's page ? it would make the page stand out perfectly!

Thank you so much for your advice and help - I really diden't expect anyone to help

this is a very helpfull community here

/Kenneth

Yeroon · #4 (**permalink**) 03-15-09, 09:48 AM

Hi,

So you want the fixed div to start at say 200 px from the top below some other div? And when that other div scrolls out of view the fixed div will scrool to the top and stay there?

Will look into it asap if this is what you need

Yeroon

k-knudsen · #5 (**permalink**) 03-15-09, 11:38 AM

That is excatly what i need

thank you so much!

Yeroon · #6 (**permalink**) 03-16-09, 05:40 AM

This should do the trick. If you need any explanation just let me know. This sample has a 200px high header div. Fixed div under that. Stays under and scrolls to top on scroll and stays fixed at 0px top when header out of view:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		#fixme { 
			position: absolute; 
			left: 0px; 
			top:200px
		}

		div > div#fixme { position: fixed; }
		
		pre.fixit { 
			overflow:auto;
			border-left:1px dashed #000;
			border-right:1px dashed #000;
			padding-left:2px; }
			
		#header {
			top:200px;
			left:20px;
			height:200px;
		}
		</style>
		
		<!--[if gte IE 5.5]><![if lt IE 7]>
			<style type="text/css">
			div#fixme {
				left: 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' );
			}
			div#fixmetoo {
				right: auto; bottom: auto;
				left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
				top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( 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="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>


	<div id="fixme">
		fixed div 1
	</div>


</div>

</body>
</html>

k-knudsen · #7 (**permalink**) 03-16-09, 11:26 AM

Hi again

It works perfectly ! flawlessly even!

here it is in action: http://limitededition.dk/test/referencer.html

by the way - i have seen through the css and Js and i can't seem to fit it into a div ? I want to move it to the right side

Yeroon · #8 (**permalink**) 03-17-09, 11:44 AM

To make it stick on the right side use right instead of left. Set opx right to 200 if you need it to be 200px from the right side:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		#fixme { 
			position: absolute; 
			right: 0px; 
			top:200px
		}

		div > div#fixme { position: fixed; }
		
		pre.fixit { 
			overflow:auto;
			border-left:1px dashed #000;
			border-right:1px dashed #000;
			padding-left:2px; }
			
		#header {
			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="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>


	<div id="fixme">
		fixed div 1
	</div>


</div>

</body>
</html>

Quote:

and i can't seem to fit it into a div

I am not sure what you mean with this.

k-knudsen · #9 (**permalink**) 03-17-09, 04:20 PM

It's Working !

take a look: http://www.limitededition.dk/test/referencer.html

thank you so much ! this would not have been possible without your solution Yeroon!

i'm so happy i could almost cry

Thank you again!

/Kenneth

( oh - i removed the #fixme position and margins

it did the trick! )

Yeroon · #10 (**permalink**) 03-18-09, 08:07 AM

glad you got it working!