在滚动时,保持屏幕中心的未知高度和宽度的绝对定位div

时间:2016-02-21 03:05:33

标签: javascript html css

我正在尝试在滚动时保持屏幕中心的未知高度和宽度的绝对位置div。仅divs父项是body元素(如果它有所不同,可以是固定的或相对的)。以下代码将在窗口中居中,但它将滚动页面。

我更喜欢CSS解决方案,但我也可以使用javascript - 我假设捕获滚动事件并以每次移动为中心。

谢谢!

这是jsFiddle

<div class="page-container"></div>
<div id="wrapper"></div>

body {
    width:100%;
}
.page-container {
    position: relative;
    max-width:978px; 
    width: 100%;
    min-height:2500px; 
    margin:0 auto -50px auto; 
    border:solid #999;
    border-width:2px;
    background: lightblue;
}

#wrapper{
    position: absolute;
    height: 200px;
    width: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    background:lightyellow;
    z-index: 200;
    /* set min just to have something to show  - it will be variable*/
    min-height: 200px;
    min-width: 200px;
    /*************/
}

1 个答案:

答案 0 :(得分:0)

我认为您可能希望使用position: fixed代替:https://jsfiddle.net/jLvgw6qj/