October 8th, 2006
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["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();
}
and then all you need is to create the object on the page that will float:
<DIV id=divMenu style="VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 10px; HEIGHT: 100px">you menu or stuff</div>
on December 7th, 2006 at 3:04 pm
I assume I bracket this with script="javascript" within the head section.
Is this correct?
Thanks
on December 7th, 2006 at 3:08 pm
good assumption…
on September 13th, 2007 at 9:19 pm
What would need to change if I wanted to anchor the object to the bottom right hand corner of the window? Sick little script!
on September 14th, 2007 at 11:33 am
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.
on February 11th, 2008 at 10:49 am
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"
on April 5th, 2008 at 3:24 pm
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?
on April 14th, 2008 at 8:48 am
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
on January 8th, 2009 at 3:42 pm
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.