滚动选择错误的元素

Question

As you can see in this example, Bootstrap Scrollspy jumps over the navigation but does not really work as it is supposed to. The wrong item is getting the .active class.

 $('.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> 

The menu and content look perfect to me, why is the wrong item highlighted?

Answer 1

I've found out what happened:

Somehow the browser did not agree with me when I told it there was a column nested in another column. TWBS CSS somehow messes the position. Removing the nest solved my problem:

 $('.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>