Question

I have a page with 2 div – left and right. The left div is fixed and the right div is scrollable.
I have a button on left div, which displays a popup(on right div) on click. Now I want that popup to be displayed always at 20px from the top of the page, even if the user has scrolled down on right div.

Currently I am using following code to position my div:

function showPopup()
{
    $('#popup').fadeIn('slow');
    //centering  
    $("#popup").css({  
    "width":'300',
    "height":'300',
    "position": "absolute",  
    "left": 280 ,
    "top":20
    });
}

This displays popup always at 20px from the absolute top of the page. So if the user have scrolled down on the right div, he won’t be able to see the popup(unless he scroll all the way up).

Please guide me on how to display div at 20px from top relative to current scroll position.

Let me know if more explanation or code is required.

Answer 1

If you change the position from absolute to fixed you should be able to achieve what you want