3

スティッキーな自己強調表示のサイドナビゲーションを機能させようとしていますが、何が欠けているのかを理解するのに苦労しています。コンテンツには data-spy="scroll" data-target=".sidenav" 属性が含まれていますが、sidenav の最後の項目のみが強調表示され、スクロール時に sidenav 項目はどれも強調表示されません。私はjsfiddleの例を持っています:

http://jsfiddle.net/b8JkE/

(結果ペインの幅を調整して、.sidenav が左側に浮くようにします)

ドキュメントhttp://twitter.github.com/bootstrap/javascript.html#scrollspyに従う

$('.sidenav') は affix() されます。div.sidenav には、ul w/ class="nav nav-tabs nav-stacked" があります。data-spy="scroll" data-target=".sidenav" を含むコンテンツ div がありますが、ページの読み込み時にナビゲーションの最後の項目が強調表示され、スクロールしても何も更新されません。私は何が欠けていますか？

html:

  <div class="container">
    <div class="row">
      <div class="span2 sidenav-parent">
        <div class="sidenav">
          <ul class="nav nav-tabs nav-stacked">
            <li><a href="#a">a</a></li>
            <li><a href="#b">b</a></li>
            <li><a href="#c">c</a></li>
            <li><a href="#d">d</a></li>
            <li><a href="#e">e</a></li>
          </ul>
        </div>
      </div>
      <div class="span10" id="gimmelove" data-spy="scroll" data-target=".sidenav">
        <h4 id="a">a</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="b">b</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="c">c</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="d">d</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="e">e</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
      </div>
    </div>
  </div>​

CSS:

body { margin-top: 20px; }
#gimmelove { background-color:#f3f3f3; }
.sidenav .active a { font-weight:600; background-color:#f3f3f3; }

js:

$('.sidenav').affix();
4

3 に答える 3

4

私も同様の問題に遭遇しました。まず、body タグに data-spy="scroll" および data-target=".sidenav" 属性を追加します。nav 要素が属性が追加された場所の外にあるなど、DOM のより深い部分に追加されると、正しく機能しません。

例えば

<body data-spy="scroll" data-target=".sidenav" >

注意すべきもう 1 つの項目は、ナビゲーションが位置固定に切り替わると、a、b、c、d セクションの上からのオフセットが変更されるため、以前にセクションで計算された位置が正確ではなくなることです。

body タグに属性を追加した例を次に示します: http://jsfiddle.net/b8JkE/50/

于 2012-11-09T09:40:18.300 に答える
3

通常、data-spyおよびdata-target属性を body タグに追加します。混乱の元は、これらのデータ属性をコンテンツを囲む他の要素に追加できるという認識です。実際には、これらのデータ属性をページ内の別の要素の「スパイ」に追加できますが、この要素には独自のネストされたスクロールバーが必要です。独自のスクロールバーがない限り、要素はスクロール イベントを発生させません。 これがあなたの更新されたJSFiddleで、divを追加してスクロールバーを追加しました。

余談ですが、データ属性を使用するのではなく、JavaScript メソッドを使用して scrollspy を接続することもできます。

したがって、ここにはいくつかのオプションがあります。

オプション 1 : body タグにdata-spyおよび属性を追加 します。data-target

<body data-spy="scroll" data-target=".sidenav">

オプション 2 : ページ内の子要素をスパイしますが、要素に独自のスクロールバーがあることを確認してください。

<div data-spy="scroll" data-target=".sidenav" 
 style="overflow-y:scroll; height:200px;">

オプション 3 : scrollspy()body/scrollbar 要素とターゲット ナビゲーションを指定して、JavaScript 経由でメソッドを呼び出します。

<script>
        $(function() {
            $('body').scrollspy({ target: '.sidenav' });
        });
</script>

ここにデモページがあります: http://www.lawruk.com/blog/60/twitter-bootstrap-fixed-navigation-with-scrollspy-example

于 2013-09-09T21:07:05.237 に答える