スクロール可能なページの上部から20ピクセルのポップアップを表示するCSS

Question

2つのdiv - 左右のページがあります。左のdivは固定され、右のdivはスクロール可能です。 左のdivにボタンがあり、クリックすると右のdivにポップアップが表示されます。今私は右のdivにスクロールした場合でも、そのポップアップがページの上部から常に20ピクセルで表示されるようにしたい。

現在、私は私のdivを配置するには、次のコードを使用しています：

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

をこれは、ページの絶対上から20ピクセルで、常にポップアップが表示されます。したがって、ユーザーが右のdivをスクロールした場合、彼はポップアップを見ることができません（スクロールしない限り）。

divを現在のスクロール位置に対して20pxから上に表示する方法を教えてください。

もっと説明やコードが必要な場合は教えてください。

Answer 1

あなたはabsoluteからfixedに位置を変更した場合、あなたは

Answer 2

が移動しません要素のためposition:fixed;を試してみて欲しいものを達成することができるはずです。

Answer 3

位置：固定があなたのためにトリックを行う必要があります。

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