调整窗口大小时移动图层

Question

我有以下HTML代码

<div id="container">
    <div id="fixed">Logo</div>
</div>​

然后是以下CSS代码

#container {
    width: 400px;
    border: 1px solid red;
    float:right;
}

#fixed {
    float:left;
    width: 200px;
    border: 1px solid green;
}​

当我调整窗口大小时，我希望固定的div在窗口边缘处于开始位置时继续向右移动。

您知道使用CSS，JavaScript或HTML进行此操作的任何方法吗？

我在jsfiddle中创建了一个示例，您可以在http://jsfiddle.net/alvarezskinner/kRrdb/中查看它，如果您调整中间栏的大小，您将看到固定层保持静止。

Answer 1

我认为这并不能完全满足您的要求，但至少可以做到这一点。 将container样式更改为：

#container {
    width: 100%;
    border: 1px solid red;
    float:right;
    max-width:400px;
}

不用移动fixed div，这只会确保container不会比页面宽，从而确保fixed div不会超出页面的左侧。 这样行得通吗？

如果您愿意，这里是一个小提琴： http : //jsfiddle.net/jdwire/kRrdb/2/

Answer 2

如果无法调整容器大小，则可以使用javascript执行以下操作：

window.onresize = function(event) {
    var fixed = document.getElementById("fixed");

    var winWidth = window.innerWidth;
    var containerWidth = document.getElementById("container").offsetWidth;
    var fixedWidth = document.getElementById("fixed").offsetWidth;

    var overlap = containerWidth - winWidth;

    if(overlap > 0) {
        // prevent the element from moving off-screen
        overlap = Math.min(overlap, fixedWidth);
    }else{
        overlap = 0;  
    }

    fixed.style.marginLeft = overlap + "px";
}

http://jsfiddle.net/kRrdb/4/

这可以变得更加简洁。 我已经扩展以使其更易于理解。