Scrollspyが間違った要素を選択しています

Question

この例でわかるように、Bootstrap Scrollspyはナビゲーション上にジャンプしますが、実際には動作しません。間違った項目が.activeクラスを取得しています。

$('.spycontent').scrollspy({ target: 'nav' })

html, body { 
 
    height:100%; 
 
} 
 

 
body > .container, body > .container > .row, .col-xs-6 { 
 
    height:100%; 
 
} 
 
    
 
.col-xs-6 { 
 
    overflow-y:auto; 
 
} 
 

 
.item { 
 
    height:500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
    </script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
 
    </script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    
 
    <div class="container"> 
 
     <div class="row"> 
 
      <nav class="col-xs-6"> 
 
       <ul class="nav nav-pills nav-stacked"> 
 
        <li> 
 
         <a href="#group1">group1</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question1">question1</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question2">question2</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="#group2">group2</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question3">question3</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question5">question5</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
      <div class="col-xs-6 spycontent"> 
 
       <div class="col-xs-12" id="group1"> 
 
        group1 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question1"> 
 
          question1 
 
         </div> 
 
         <div class="col-xs-12 item" id="question2"> 
 
          question2 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-xs-12" id="group2"> 
 
        group2 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question3"> 
 
          question3 
 
         </div> 
 
         <div class="col-xs-12 item" id="question5"> 
 
          question5 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

間違った項目がハイライトされている理由のメニューやコンテンツは、私には完璧に見えますか？

Answer 1

私は何が起こったかを見つけた：私は別の列にネスト列があったことを言ったとき

はどういうわけか、ブラウザは、私と一緒に同意しませんでした。 TWBSのCSSがどうにかしてその位置を乱す。

$('.spycontent').scrollspy({ target: 'nav' })

html, body { 
 
    height:100%; 
 
} 
 

 
body > .container, body > .container > .row, .col-xs-6 { 
 
    height:100%; 
 
} 
 
    
 
.col-xs-6 { 
 
    overflow-y:auto; 
 
} 
 

 
.item { 
 
    height:500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
    </script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
 
    </script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    
 
    <div class="container"> 
 
     <div class="row"> 
 
      <nav class="col-xs-6"> 
 
       <ul class="nav nav-pills nav-stacked"> 
 
        <li> 
 
         <a href="#group1">group1</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question1">question1</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question2">question2</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="#group2">group2</a> 
 
         <ul class="nav nav-pills nav-stacked"> 
 
          <li> 
 
           <a href="#question3">question3</a> 
 
          </li> 
 
          <li> 
 
           <a href="#question5">question5</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
      <div class="col-xs-6 spycontent"> 
 
       <div id="group1"> 
 
        group1 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question1"> 
 
          question1 
 
         </div> 
 
         <div class="col-xs-12 item" id="question2"> 
 
          question2 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div id="group2"> 
 
        group2 
 
        <div class="row"> 
 
         <div class="col-xs-12 item" id="question3"> 
 
          question3 
 
         </div> 
 
         <div class="col-xs-12 item" id="question5"> 
 
          question5 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

：巣を削除すると、私の問題を解決しました