1

ユーザーのブラウザー ウィンドウが約 1024 ピクセル未満の場合 (サイトには 1024 ピクセル以上の水平スクロールがありません)、メイン コンテンツをさらに表示するために右にスクロールすると、それを実現する方法を見つけようとしています。左の固定位置メニューによってオーバーラップ/乱雑になりません。

私が直面している基本的な問題を再現する JS フィドルを作成しました: http://jsfiddle.net/YE7ZZ/1/

CSS

#wrap {
    width:100%;
    background-image:url('../images/Imagine/bg_image44.png');
    background-attachment:fixed;
} 

#top {

}

#left {
    position:fixed;
    border:1px solid red;
    background:pink;
    width:250px;
}
#positioner {
    margin-left:250px;
    width:auto;
}
#content {
    border:1px solid green;
    width:700px;
    margin:auto;
        background:grey;

}

HTML

    <div id="wrap">
    <div id="top"></div>
    <div id="left">menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br /></div>
    <div id="positioner">
        <div id="content">asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</div>

過去 6 週間に 3 回ほどこの問題を解決しようとしましたが、解決策を見つけることができませんでした。

お時間をいただきありがとうございます。

編集-私の理想的な解決策は、コンテンツ部分に水平スクロールバーを表示して、コンテンツ自体をスクロールできるようにすることです。または 2) 視聴可能なコンテンツの量を切り取る。または 3) 左メニューのサイズを小さくする

解決済み: @Gaby aka G. Petrioli に感謝します

私はこのJavaScriptソリューションを使用しました：

$(document).ready(function(){
var lastLeft = -1,
    menu = $('.left_, .top_');

$(window).on('scroll resize', function(){
    var left = $(window).scrollLeft();
    if (left >= 0 && left!==lastLeft){
        lastLeft = left;
        menu.css('left',-left+'px');
    }
});

});

そして、彼が概説したように CSS を変更し、私のライブ バージョンでは、一部のトップ メニュー要素の配置を固定から絶対に変更する必要がありました。本当にありがとうございました！

4

6 に答える 6

1

特定のニーズはわかりませんが、ルールwidth:700pxからを削除すると、その要素はビューポートのように縮小されます...content

http://jsfiddle.net/YE7ZZ/2/のデモ

一方、レイアウトを維持する必要があり、fixed垂直スクロールのみに適用したい場合は、jquery を使用する必要があります (純粋な CSS では不可能です) 。

var lastLeft = -1,
    menu = $('#left');
$(window).on('scroll resize', function(){
    var left = $(window).scrollLeft();
    if (left >= 0 && left!==lastLeft){
        lastLeft = left;
        menu.css('left',-left+'px');
    }
});

http://jsfiddle.net/YE7ZZ/3/のデモ

于 2013-10-07T17:11:56.513 に答える
0

あなたが何を望んでいるかを理解したので、これは非常に簡単な修正です。positionerラッパーを絶対にしてマーカーを設定し、スクロールするように指示するだけです。

 #positioner {
     position: absolute;
     top: 0px;
     left: 250px;
     right: 0px;
     bottom: 0px;
     overflow: auto;
 }
于 2013-10-07T17:20:02.610 に答える
0

画面/ビューポートの幅に基づいて CSS を変更します。

これを頭に追加します。

<meta name="viewport" content="initial-scale=1">

サイズに基づいて CSS ルールを変更します。

@media screen and (min-width : ###px) and (max-width : ###px) {
   .your-css-here{
   }
}

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

これを行うと、固定ナビゲーション メニューを別の方法で表示するように変更できます。

いいえ:

@media screen and (max-width : 1024px) {
   nav{
      position:relative;
      etc...:...;
   }
 }

編集 --- 持っていmax/min-device-widthました。である必要がありますmax/min-width。

于 2013-10-07T17:08:16.203 に答える
0

それがまさにあなたが望む/必要なものになるかどうかはわかりませんが、id="positioner" を使用して div に絶対配置を使用することもできます。margin-left:250px を置き換えるだけです

position: absolute;
left: 250px;
right: 0;
overflow: auto;

Fiddle を少し変更しました。ここで新しいバージョンを見つけることができます

于 2013-10-07T17:09:39.417 に答える
0

フロートでこれを行うことができます。コンテナー (#wrap) に高さを取得させたい場合は、clearfix を使用する必要がある場合があります。

ここにフィドルがあります: http://jsfiddle.net/EqXBp/

CSS:

#left {
    float: left;
    border:1px solid red;
    background:pink;
    width:250px;
}

#content {
    border:1px solid green;
    float: right;
    width: calc(100% - 4px);
    margin:auto;
    background:grey;
}
于 2013-10-07T17:10:26.533 に答える