页面滚动时设置div位置

我知道类似的问题已被问到，但我没有看到这一个。！页面滚动时设置div位置

我在我的页面上有3个div。

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

OUTER是外层div

右边是我想移动的页面滚动股利。

enter image description here

可以将此图像，其中右坐在看到，随着页面滚动下来，我想向右移动与它。

我试着将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这个目前的样子。

如何正确移动页面？

感谢

来源

2015-04-07 JeffVader

你是否正在寻找类似的产品？ https://jsfiddle.net/r2szxxvw/2/ – Nitesh

@NKL是的，但是..如果你调整页面的大小，右边的div位于不同的位置。如果你全屏运行小提琴，那么正确的div现在不在Outer div之外，当它不应该。 – JeffVader

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

来源

2015-04-07 09:59:22 gbuzogany

Thx - 你有没有scrollTop和onscroll的例子？ – JeffVader

https://jsfiddle.net/w360og9m/ – gbuzogany

gbuzongany - 谢谢你完美:) – JeffVader

添加position:fixed; right:0px;您#right股利。

来源

2015-04-07 09:52:56 RouthMedia

我做了，并推到外部股利之外的权利股利。 – JeffVader

我已经稍微改变了措辞 – RouthMedia

页面滚动时设置div位置

回答

相关问题