在页面滚动时设置div位置

Question

我知道有类似的问题，但我没有看过这个问题。 ！

我的页面上有3个div。

WRAP是主要的页面包装器，并提供了内部div的边框。

OUTER是外部div

RIGHT是我想在页面滚动时移动的div。

你可以在这张图片上看到RIGHT所在的位置，当页面向下滚动时我想要随身携带它。

我已经尝试将CS​​S位置设置为固定，但如果页面调整大小，则会混淆布局。我目前拥有的CSS是：

#wrap 
{ 
    width: 100%; 
    margin: 50px auto; 
    padding: 20px 20px 20px 20px; 
    border:2px solid #800000; 
}

#outer 
{
    margin: auto;
    width: 700px;
    height: 1250px;
    display: table;
    border: 2px solid #000008;
}

#right 
{
    float: right;
    width: 100px;
    height: 100px;
    border: 2px solid #008000;
}

我创建了 fiddle ，了解目前的情况。

如何正确使用页面进行移动？

由于

Answer 1

RouthMedia的答案有效，但如果您有不同的约束，例如“如果窗口小于布局，则不应该在内容之上”

要解决此问题，您可以使用window.onresize函数根据您想要的约束更改div的正确位置。

window.onresize = function(event) 
{
    // is the window smaller than something it shouldn't? calculate the new position
    ("#right").css("right", newpos);
};

编辑：看到你不希望它离开外部div。

一种方法：当页面加载时，将“right”属性设置为将其置于外部div中的内容。如果屏幕调整大小，请更新它。

另一种方法：使用position: absolute，并在onscroll事件触发时使用document.scrollTop值更新“top”属性。

Answer 2

将position:fixed; right:0px;添加到您的#right div。