4

私は Twitter Bootstrap Scrollspy プラグインを使用してきましたが、私の人生ではそれを機能させることができません。コンテンツ領域の HTML は次のとおりです。

<div data-spy="scroll" >
  <section id="page_home" class="page_home" style="width:100%;background-color:rgb(245,245,245);">
    <div class="container">
      Home
    </div>
  </section>

  <section id="page_projects" class="page_projects" style="width:100%;background-color:rgb(25,25,25);">
    <div class="container">
      Projects
    </div>
  </section>

  <section id="page_services" class="page_services" style="width:100%;background-color:rgb(245,245,245);">
    <div class="container">
      Services
    </div>
  </section>

  <section id="page_downloads" class="page_downloads" style="width:100%;background-color:rgb(25,25,25);">
    <div class="container">
      Downloads
    </div>
  </section>

  <section id="page_about" class="page_about" style="width:100%;background-color:rgb(245,245,245);">
    <div class="container">
      About
    </div>
  </section>

  <section id="page_contact" class="page_contact" style="width:100%;background-color:rgb(25,25,25);">
    <div class="container">
      Contact
    </div>
  </section>
</div>

これがナビゲーションバーのHTMLコードです

<div id="navbar" class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li><a href="#page_home">Home</a></li>
        <li><a href="#page_projects">Projects</a></li>
        <li><a href="#page_services">Services</a></li>
        <li><a href="#page_downloads">Downloads</a></li>
        <li><a href="#page_about">About</a></li>
        <li><a href="#page_contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div><!-- /.navbar -->

私は他の投稿のいくつかを見てきましたが、私の人生では、ナビゲーションバーの最後の項目だけが選択されている理由がわかりません.

scrollspy が最後のアイテムのみを選択する理由とそれを修正する方法を誰かが理解するのを手伝ってくれますか?

4

4 に答える 4

1

このコードを試してください：

 $('[data-spy="scroll"]').each(function () {
     var $spy = $(this).scrollspy('refresh')
  });

私は同様の問題に直面しました。上記のコードを使用して問題を解決しました。

于 2013-11-06T07:31:13.143 に答える