web-dev-qa-db-ja.com

TwitterでのサイドバーのオーバーフローBootstrap Affix

Twitter bootstrapで接辞プラグインを使用しようとしていますが、親コンテナ内でそれを制約する方法がわかりません。問題を示すために次の例を作成しました。

問題のデモ： http://www.codeply.com/go/DvcRXkeFZa

<div class="container">
    <div class="row">
        <div class="col-md-3 column">
            <ul id="sidebar" class="well nav nav-stacked" data-spy="affix" data-offset-top="130">
                <li><a href="#software"><b>Software</b></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#benefits">Benefits</a></li>
                <li><a href="#costs">Costs</a></li>
            </ul>
        </div>
        <div class="col-md-9 column">
            <h1>Blah, blah, blah</h1>
            <hr>
            <a class="anchor3" id="top" name="software"></a>
            <p>
             content here that scrolls...
            </p>
        </div>
    </div>
</div>

スクロールするとサイドバーからオーバーフローすることがわかりますが、ページの下部に到達してもページの下部には貼り付けられません。

twitter-bootstrapcss-positionstickyaffix
7
John Mellor

Bootstrap docs（ http://getbootstrap.com/2.3.2/javascript.html#affix ）から。

注意喚起！固定された要素の位置とその直接の親の動作を管理する必要があります。位置は、接辞、接辞-上、および接辞-下によって制御されます。ページの通常のフローからコンテンツを削除しているため、接辞が開始されたときに、折りたたまれている可能性のある親を確認することを忘れないでください。

したがって、要素が固定されたときに要素の幅を設定するには、affixにCSSが必要です。といった：

#sidebar.affix {
    position: fixed;
    top: 0;
    width:225px;
  }

Bootplyのデモ： http://bootply.com/73864

Bootstrap接辞：
bootstrap 3？ を使用してスティッキーな左側のサイドバーメニューを作成する方法
Twitter-bootstrap 3は、ウィンドウのサイズが変更されたときにコンテンツをオーバーラップするサイドバーを貼り付け、フッターも追加しました

24
Zim

@FreezeDriedPopへの回答で、私はこれが私のために働くことを発見しました：

var navbw = $('#sidebar').width()-7;
$('header').append('<style id="addedCSS" type="text/css">#sidebar.affix {width:'+navbw+'px;}</style>');
3
netcult