Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change CSS "position" when scrolling

    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!

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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):
    Code:
    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:
    Code:
    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.
    Last edited by Rowsdower!; 09-12-2011 at 05:12 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •