html - 在页面滚动时设置 div 位置

Question

我知道有人问过类似的问题，但我没见过这个问题。 !

我的页面上有 3 个 div。

WRAP 是主页面包装器，并在内部 div 周围提供边框。

OUTER是外层div

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

您可以在这张图片上看到 RIGHT 所在的位置，随着页面向下滚动，我希望 right 随之移动。

我试过将 CSS 位置设置为固定，但如果调整页面大小，这会弄乱布局。我目前拥有的 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”属性。