1

私はほぼすべてが機能しています： http://firestream.net/2013/index.php?go=stats

私が抱えている2つの問題は次のとおりです。

1) 下にスクロールすると、サイド ナビゲーション リストが現在の位置ではなく、画面の一番上に表示されるようにしたい 2) 下にスクロールすると、ナビゲーション リストの幅が狭くなる

<div class="row">
    <div class="span3">
        <ul class="nav nav-list" id="sidenavbar">
              <li class="active"><a href="#top10pt"><i class="icon-chevron-right"></i> Top 10 Pages Today</a></li>
              <li class=""><a href="#top10pa"><i class="icon-chevron-right"></i> Top 10 Pages Alltime</a></li>
              <li class=""><a href="#daily"><i class="icon-chevron-right"></i> Daily Stats</a></li>
              <li class=""><a href="#top10rt"><i class="icon-chevron-right"></i> Top 10 Referalls Today</a></li>
        </ul>
    </div>

    <div class="span9" id="content">
       <section id="top10pt">
       ...
       </section>
       <section id="top10pa">
       ...
       </section>
       <section id="daily">
       ...
       </section>
       <section id="top10rt">
       ...
       </section>
    </div>
</div>

<script>
$('#sidenavbar').affix();
$('body').scrollspy();
</script>

どんな助けやアドバイスも素晴らしいでしょう！

4

2 に答える 2

5

次の CSS を使用する#sidebarnavと、接辞プラグインが.affixクラスをアイテムに追加するときに が配置されます。クラスは.affixポジショニングを固定し、ドキュメントに記載されているように、自分でポジショニングを行う必要があります。

#sidebarnav.affix {
  top: 56px;
}

ドキュメントを読む:ピン留めされた要素の位置とその直接の親の動作を管理する必要があります。位置は、affix、affix-top、および affix-bottom によって制御されます。ページの通常のフローからコンテンツを削除するため、接辞が適用されたときに折りたたまれている可能性のある親を確認することを忘れないでください。

于 2013-02-11T23:46:16.873 に答える
0

最近、scrollspy で同様の問題に対処する必要がありました。

まず、接辞クラスを要素に適用する必要があります。その理由は、scrollpy 関数がこのクラスを探し、ユーザーがページのどこにいるか、またはドキュメントが読み込まれたかどうかに応じて、接辞から接辞トップに変更するためです。これは、ユーザーがスクロールを開始するまで scrollspy オブジェクトが通常のドキュメント フローに収まるため、位置の問題を解決するのに役立ちます。

  • 接辞クラスが存在する場合にオブジェクトのチェーンセレクターを作成して、ページの最上部から離れた位置に配置できるようにしてください。ul.nav.affix: {top: ##px;} のようなものはうまくいきました。

次に、接辞が適用されると、通常のドキュメント フローからそれを削除します。位置が固定されているためです。適用されます。相対単位を使用して scrollspy の幅を定義している場合、scrollspy の幅とその親の間の関係が変更されたため、幅がシフトします (親が異なり、'span-3 に含まれなくなった) 'ul)。

于 2014-09-24T21:07:41.020 に答える