(complicated) floating menu problem

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 [URL=”http://www.ufc.org.hk/about.html”]http://www.ufc.org.hk/about.html[/URL]

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 [URL=”http://www.jtricks.com/javascript/navigation/floating.html”]this[/URL]
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

(sorry for my english)

Also in #JavaScript _↴