CSS Code, DHTML Code, JavaScript Code

Make an object stay on the page when scrolling

It's pretty common to see a nav bar or some persistent menu/object floating on a web page as you scroll dow it. Well here's the code to do that yourself. You can set the specific location for the floating object, and when the web page is scrolled down or up the object will float to that position as slow or fast as you set it to.



var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
 
function getRef(id) {
	if (isDOM) return document.getElementById(id);
	if (isIE4) return document.all[id];
	if (isNS4) return document.layers[id];
}
 
function moveRightEdge() {
	var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck ;
 
 
	if (isNS4) {
		yMenuFrom   = divMenu.top;
		yMenuTo     = windows.pageYOffset + 137;  
	} else if (isDOM) {
		yMenuFrom   = parseInt (divMenu.style.top, 10);
		yMenuTo     = (isNS ? window.pageYOffset : document.body.scrollTop) + 30;  //Specify the distance of the  Floating Object from top.
	}
	timeoutNextCheck = 50;
 
	if (yMenuFrom != yMenuTo) {
		yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);//Specify the floating Speed high=0,slow=500. etc 
		if (yMenuTo < yMenuFrom)
			yOffset = -yOffset;
		if (isNS4)
			divMenu.top += yOffset;
		else if (isDOM)
			divMenu.style.left =  120;//Specifies the distance of the floating object from left. 
			
			divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
			timeoutNextCheck = 0; //Specifies the speed of reaction .
	}
	setTimeout ("moveRightEdge()", timeoutNextCheck);
}
 
if (isNS4) {
	var divMenu = document&#91;"divMenu"&#93;;
	divMenu.top = top.pageYOffset + 0;
	divMenu.visibility = "visible";
	moveRightEdge();
} else if (isDOM) {
	var divMenu = getRef('divMenu');
	divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 0;
	divMenu.style.visibility = "visible";
	moveRightEdge();
}
&#91;/code&#93;

and then all you need is to create the object on the page that will float:

&#91;code lang="html"&#93;
<DIV id=divMenu style="VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 10px; HEIGHT: 100px">you menu or stuff</div>
Share

8 Comments

  1. I assume I bracket this with script="javascript" within the head section.

    Is this correct?
    Thanks

  2. good assumption…

  3. What would need to change if I wanted to anchor the object to the bottom right hand corner of the window? Sick little script!

  4. I'm not really sure. I think you'd have to read the user's resolution, then set the top pixel offset to the right number of pixels based on their window height.

  5. Hi, I tried the following. It didn't turn out to work – something I did wrong?

    Regards,

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Make an object stay on the page when scrolling

    var isDOM = (document.getElementById ? true : false);
    var isIE4 = ((document.all && !isDOM) ? true : false);
    var isNS4 = (document.layers ? true : false);
    var isNS = navigator.appName == "Netscape";

    function getRef(id) {
    if (isDOM) return document.getElementById(id);
    if (isIE4) return document.all[id];
    if (isNS4) return document.layers[id];
    }

    function moveRightEdge() {
    var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck ;

    if (isNS4) {
    yMenuFrom = divMenu.top;
    yMenuTo = windows.pageYOffset + 137;
    } else if (isDOM) {
    yMenuFrom = parseInt (divMenu.style.top, 10);
    yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + 30; //Specify the distance of the Floating Object from top.
    }
    timeoutNextCheck = 50;

    if (yMenuFrom != yMenuTo) {
    yOffset = Math.ceil(Math.abs(yMenuTo – yMenuFrom) / 20);//Specify the floating Speed high=0,slow=500. etc
    if (yMenuTo < yMenuFrom)
    yOffset = -yOffset;
    if (isNS4)
    divMenu.top += yOffset;
    else if (isDOM)
    divMenu.style.left = 120;//Specifies the distance of the floating object from left.

    divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
    timeoutNextCheck = 0; //Specifies the speed of reaction .
    }
    setTimeout ("moveRightEdge()", timeoutNextCheck);
    }

    if (isNS4) {
    var divMenu = document["divMenu"];
    divMenu.top = top.pageYOffset + 0;
    divMenu.visibility = "visible";
    moveRightEdge();
    } else if (isDOM) {
    var divMenu = getRef('divMenu');
    divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 0;
    divMenu.style.visibility = "visible";
    moveRightEdge();
    }

    <img src="http://" alt="Test"

  6. hi,

    I have copied the code on the page and added to my code together with the DIV to hold the object i want to scroll with the page but not working.

    Do anyone knows why?

  7. Hi There,

    You will notice this is my second time i have posted on this site regarding the code sample above. It's an ideal solution for a project i am currently working on, but like i said on my previous post – the code didnt work upon many attemp to get this up and running.

    Do anyone in this in world knows what's going wrong here.

    Bright

  8. I was wondering if this script would work with current browsers. I saw "Netscape" and I didn't know if you coded this script for all of Netscape's nuances.

    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image