1

私は次の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/で表示できます。中央のバーのサイズを変更すると、固定レイヤーが静止していることがわかります。

4

2 に答える 2

1

これがあなたの望むことを正確に行うとは思いませんが、少なくとも近づいています。containerスタイルを次のように変更します。

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

fixeddivを移動する代わりにcontainer、これにより、がページより広くならないようにするだけで、fixeddivがページの左側を超えないようになります。これで十分に機能しますか？

必要に応じて、ここにフィドルがあります：http: //jsfiddle.net/jdwire/kRrdb/2/

于 2012-11-09T15:34:53.660 に答える
0

コンテナのサイズ変更が受け入れられない場合は、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/

これはもっと簡潔にすることができます。わかりやすくするために拡張しました。

于 2012-11-09T15:51:00.257 に答える