CSS 在可滚动页面上显示距离顶部 20px 的弹出窗口答案

【问题标题】：CSS to display a popup at 20px from top on a scrollable pageCSS 在可滚动页面上显示距离顶部 20px 的弹出窗口
【发布时间】：2012-05-09 12:20:08
【问题描述】：

我有一个有 2 个 div 的页面 - 左右。左 div 是固定的，右 div 是可滚动的。我在左侧 div 上有一个按钮，单击时会显示一个弹出窗口（在右侧 div 上）。现在我希望该弹出窗口始终显示在距页面顶部 20px 处，即使用户已向下滚动到右侧 div。

目前我正在使用以下代码来定位我的 div：

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

这总是在距页面绝对顶部 20 像素处显示弹出窗口。因此，如果用户在右侧 div 上向下滚动，他将无法看到弹出窗口（除非他一直向上滚动）。

请指导我如何在相对于当前滚动位置的距离顶部 20px 处显示 div。

如果需要更多解释或代码，请告诉我。

【问题讨论】：

标签： jquery css popup scroll

【解决方案1】：

如果你将位置从absolute 更改为fixed 你应该能够实现你想要的

【讨论】：

你打败了 kvanberendonck :)

【解决方案2】：

对于不会移动的元素，请尝试 position:fixed;。

【讨论】：

谢谢..这正是我想要的...在 8 分钟内接受答案 :)

【解决方案3】：

position:fixed 应该为你解决问题：

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

【讨论】：