floating menu problem. (please help)

[llllawrence]

Hi all, thanks for reading this
I have a rather complicated (at least to me ) floating menu problem.
I have a little page like this http://www.ufc.org.hk/about.html

probably you don't understand the chinese so neglect it
but as you can see, I have a rather long page
so that I created a right navigation box (not finished, supposedly for going to those page anchors)

I wanted the right box to move down as soon as I scroll down the page to a extent that the box can not be seen 100%, (being covered by the browser)

I did a search and I found something like this
which has the effect of moving while scrolling but not really what i wanted..
as,
1. it will start as soon as I scroll ( not until a extent has been reached )
2. its position seems to be fixed but my page is actually centered in a big div...
I want my box to center with my other content like it will now but also it could move while scrolling.

could anyone tell me a workaround for my problem?
I am completely a newbie of this kinda stuff
again thanks for reading this

[Trinithis]

I wanted the right box to move down as soon as I scroll down the page to a extent that the box can not be seen 100%, (being covered by the browser)

Why, and to what extent? Covered by the top, the right, etc? And if the user scrolls back to the very top, will the box still be covered?

[llllawrence]

Why, and to what extent? Covered by the top, the right, etc? And if the user scrolls back to the very top, will the box still be covered?

maybe i didn't address my problem properly
would you mind take a look at this image

thanks a million

[Trinithis]

I'm still not exactly sure what you want, but see how you like this. Place the following code immediately after your <div id="right"> tag is closed.

<script type="text/javascript">
var o = document.getElementById("right");
o.style.position = "relative";
o.startOffsetTop = o.offsetTop;
var moveRight = window.setInterval(function(){o.style.top = Math.max(window.pageYOffset - o.startOffsetTop, 0) + "px";}, 20);
</script>

Only tested in FF because I can't get a shell bookmarklet to work in IE

[llllawrence]

that's exactly what I wanted,
I figured that animation effect is not necessary !
thanks

firefox works perfect,
not possible to have it in IE??

[Trinithis]

I think it works in IE. I just haven't tested it. You can though, or if you don't have IE, update your page and I'll check.

[llllawrence]

updated,
FF works perfect
my IE6 says "done with javascript error"
didn't try IE7
because still I think the majority still uses IE6

[Trinithis]

As usual, IE does not support certain properties, in this case, window.pageYOffset, so I bummed some code off a site.

<script type="text/javascript">
function getScrollY() {
	var scrOfY = 0;
	if(window.pageYOffset!==undefined) scrOfY = window.pageYOffset;
	else if(document.body && (document.body.scrollTop)) scrOfY = document.body.scrollTop;
	else if(document.documentElement && (document.documentElement.scrollTop)) scrOfY = document.documentElement.scrollTop;
	return scrOfY;
}
o = document.getElementById("right");
o.style.position = "relative";
o.startOffsetTop = o.offsetTop;
window.setInterval(function(){o.style.top = Math.max(getScrollY() - o.startOffsetTop, 0) + "px";}, 20);
</script>

[llllawrence]

your the best
thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1