how to dynamically position popup menu?

I have a question regarding to positioning a popup menu. Imagine I have a bunch of links like this:

link1

link2

link3

link4

link5


As I click on one of these links, a little popup menu appears next to the link.
The lower the link is on the page, the lower the popup menu appears. The menu always pop up next to the link.


the problem arises when I have an excessive amount of links say 100 links...

link1

....

link100



I dont want the amount of links to stretch the page so I place the links inside a div with a fixed height and a scroll bar so that the user can scroll up and down to view all the links.

The problem now is when the user clicks the links that are way at the bottom of this div. The user first scrolls down then clicks the link...the popup menu appears but its all the way at the bottom of my page, way pass the div container.

The top and left values being used by the popup menu are the actual positioning values of the link before it is being scrolled.

How can I get the top and left value dynamically after the user uses the scroll bar?


Here is what my code looks like:

function positionMenu(link_i){
	
    var linkObj = document.getElementById(link_i);
    var offsetTrail = linkObj;
    var offsetLeft = 0;
    var offsetTop = 0;
    
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
	
    var popupMenu = document.getElementById("myPopupMenu");
    popupMenu.style.left = offsetLeft +30 + 'px';
    popupMenu.style.top = offsetTop + 'px';
}

Code (markup):