在页面滚动时设置 div 位置答案

【问题标题】：Set div position while page scrolls在页面滚动时设置 div 位置
【发布时间】：2015-06-11 20:57:22
【问题描述】：

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

我的页面上有 3 个 div。

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

OUTER 是外层 div

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

您可以在这张图片上看到 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 与当前的外观。

我怎样才能正确地随着页面移动？

谢谢

【问题讨论】：

您在寻找类似的东西吗？ jsfiddle.net/r2szxxvw/2
@NKL 是的，但是.. 如果您调整页面大小，则右侧 div 位于不同的位置。如果您全屏运行小提琴，则右侧 div 现在位于 Outer div 之外，而它不应该在。

标签： html css layout position

【解决方案1】：

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

【讨论】：

我做到了，这将右 div 推到了外部 div 之外。
我稍微改变了措辞

【解决方案2】：

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”属性。

【讨论】：

Thx - 你有 scrollTop 和 onscroll 的例子吗？