Change CSS "position" when scrolling

[itsalltech]

Hi.

I'm trying to figure out a way that, when a user scrolls down the page and hits the footer (#footer), a div's CSS position changes from fixed to absolute. The main reason is because I don't want the div that if fixed to go over the footer - I want it to just stop scrolling with the page and stay put.

I'd assume this is done with JavaScript, but I have no idea where to start. If someone could give me a basic code that I can then modify that would be awesome!

Thanks!

[Rowsdower!]

Yes, javascript is your friend for this one. You will need to get the user's display window height for this to work.

Once you have isolated the user's viewport height you will test that against their current scroll height in the page. Then, when it is past the threshold you need to get it to stick where you want it you will set the top or bottom position to a new value that will need to be calculated and set for each bit of scrolling that occurs beyond the threshold point in the page. This will give the effect of "docking" the target element in the page when you scroll to the right place.

This is some code I used in an old project (I found it online myself and tweaked it for what I needed back when I used it, so credit does not really go to me):

function pageWidth(){
	return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
function pageHeight(){
	return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
function posLeft(){
	return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
function posTop(){
	return typeof window.pageYOffset != 'undefined' ?  window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
function posRight(){return posLeft()+pageWidth();}
function posBottom(){return posTop()+pageHeight();}
function moveObjTo(objectID,x,y){
	var objs = document.getElementById(objectID);
	objs.style.left = x+"px";
	objs.style.top = y+"px";
}
var is_ie=function (){
	if(!!(window['ActiveXObject'])){
		return true;
	}
	else{
		return false;
	}
}
function scroll_with_page(target){
	var x = (pageWidth() - 950)/2;	//this gives us the width of the spacing on one side of the "main" div...
	x = pageWidth() - (2 + 350 + x + 20);	//this gives us the entire page's width, less the width of the player, the width of the side spacing, and the width of the padding set for "wrapper"
	if(is_ie==true){
		//if relevant, un-comment the line below and add whatever spacing IE's calculations leave off in your application...
//		x = x + 10;
	}
	var y = posTop();
	if(y<175){
		//making the minimum top distance 185px so that the element only starts to scroll once we
		//get past the original location in the page - it will then stop scrolling up with the page
		//once we get back to the original location again.
		y=185-y;
	}
	else{
		y=10; //leaving 10px space intentionally
	}
	moveObjTo('target',x,y);
}

Then use onload, onscroll, and onresize to fire the function, something like this:

window.onload=scroll_with_page('your_element_id_here');
window.onscroll=scroll_with_page('your_element_id_here');
window.onresize=scroll_with_page('your_element_id_here');

The script as it is now will do the opposite of what you want. Namely, it leaves an element docked in the page until you scroll down far enough to activate it. You will want to adjust this for your needs, but this is the basic idea that I have used in the past with success.

So change some numbers around and switch +/- for some calculations and this should do what you need it to do.