0

オンラインのチュートリアル/手順に従って、サイドバーの位置を「固定」してサイドバーを固定位置にすると、正常に機能しました。私のページには最小幅の属性があるため、ユーザーが横にスクロールすると、動かないコンテンツがサイドバーに移動することに気付きました。基本的に、スクロールダウン時に固定サイドバーを生成する方法を探していますが、横に移動するとコンテンツがサイドバーにジャンプしません。私のコードは次のようなものです：

CSS

#sidebar {
    position:fixed;
    height:500px;
    width: 100px;
    background-color: blue;                    
}
#content {
    width:100%;
    box-sizing:border-box;
    margin-left:100px;
    background-color:purple;
}

HTML

<div id="sidebar">
</div>
<div id="content">
</div>

​

JSFiddle: http://jsfiddle.net/znCF3/1/

注: これは私の実際のコードではなく、私のコードが非常に複雑であるため、縮小版です。また、流動的なレイアウトを使用することはできません。

4

3 に答える 3

1

他の方もおっしゃっているように、css と html だけでは無理です。ただし、javascript/jquery でこれを行うことができます。

これを行うためにjqueryを使用したい場合は、最初にワトソンが言ったように、サイドバーのインデックスを変更してください（私は否定しなければなりませんでした）。

次に、に追加します<head>：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
<!--
$(document).ready(function() {

    $(window).scroll(function(){ 
        var offSet = - ($(this).scrollLeft());
        $('#sidebar').css('left', offSet);
    });
});
//-->
</script>

例

于 2012-07-06T19:29:11.497 に答える
1

このフィドルをチェックしてください: http://jsfiddle.net/NfKca/

css を次のように変更しました。

#sidebar {
    position:fixed;
    height:500px;
    width: 100px;
    background-color: blue;                    
}
#content {
    box-sizing:border-box;
    background-color:purple;
    position:absolute;
    left:100px;           
}
于 2012-07-06T19:15:00.860 に答える
0

サイドバーに設定できますz-index: 1;。これで問題が解決しない場合は、jsfiddle を作成して、意味をさらに説明していただければ幸いです。

于 2012-07-06T19:07:42.090 に答える