'Active' not appearing during scrolling in bootstrap - html

Question

I am trying to create a vertical scrollspy for a body of text. I have applied all the necessary tags and marked them with classes. I have applied the changes from here.
This is my code https://jsfiddle.net/DTcHh/23737
<div class="container">
<h1>Where's the plag?</h1>
<div class="jumbotron">
<small>
<p>Atom Type: paragraph </p>
<p>Cluster Method: kmeans </p>
<p>k: 2 </p>
Stylistic Feature(s):
<p>honore_r_measure </p>
<p></p>
</small>
<br>
<!--<div id='chart-container'></div>-->
</br>
<br>
</br>
<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#full_table">
Hide/Show Table
</button>
<div class="row collapse in" id="full_table">
<div class="col-md-9">
<div class="table-responsive" style="font-size:12px;">
<table class="table table-condensed table-scrollable table-bordered">
<thead>
<tr>
<th>Start Index</th>
<th>honore_r_measure</th>
<th>Suspicion Score</th>
</tr>
</thead>
<tbody>
<tr class="passage_starting_at_">
<td class="passage_row"> 0</td>
<td class="passage_row"> 2831.7247</td>
<td class="passage_row" bgcolor=#F60C0C> 0.9108</td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 264</td>
<td class="passage_row"> 1799.9239</td>
<td class="passage_row">0.0288</td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 720</td>
<td class="passage_row"> 1585.1819</td>
<td class="passage_row">0.1407</td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 1470</td>
<td class="passage_row"> 2785.1247</td>
<td class="passage_row" bgcolor=#F60C0C> 0.9466</td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 1850</td>
<td class="passage_row"> 1762.0442</td>
<td class="passage_row">0.0106</td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 2057</td>
<td class="passage_row"> 1942.3584</td>
<td class="passage_row">0.1779</td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 3189</td>
<td class="passage_row"> 2567.0830</td>
<td class="passage_row">0.8316</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"><div id="boxplot"></div></div>
<div class="col-md-9"><div class="panel-heading">
rowling_and_dickens
</div>
<div style="height: 700px;overflow-y: scroll;" class="panel-body col-md-9" id="document_content">
<p>
<div class="passage" features="<p>Span</p><p>0, 262</p><hr size = "10"<p>Plag. conf.</p><p>0.910800725896</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>2831.7247</p><hr size = "10""
style="font-size:14px;display:inline;color:rgb(255,0,0);" id='pass0'>
Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say
that they were perfectly normal, thank you very much. They were the last
people you'd expect to be involved in anything strange or mysterious,
because they just didn't hold with such nonsense.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>264, 718</p><hr size = "10"<p>Plag. conf.</p><p>0.0288266743586</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>1799.9239</p><hr size = "10""
style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass1'>
Mr. Dursley was the director of a firm called Grunnings, which made
drills. He was a big, beefy man with hardly any neck, although he did
have a very large mustache. Mrs. Dursley was thin and blonde and had
nearly twice the usual amount of neck, which came in very useful as she
spent so much of her time craning over garden fences, spying on the
neighbors. The Dursleys had a small son called Dudley and in their
opinion there was no finer boy anywhere.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>720, 1468</p><hr size = "10"<p>Plag. conf.</p><p>0.1407492634</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>1585.1819</p><hr size = "10""
style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass2'>
The Dursleys had everything they wanted, but they also had a secret, and
their greatest fear was that somebody would discover it. They didn't
think they could bear it if anyone found out about the Potters. Mrs.
Potter was Mrs. Dursley's sister, but they hadn't met for several years;
in fact, Mrs. Dursley pretended she didn't have a sister, because her
sister and her good-for-nothing husband were as unDursleyish as it was
possible to be. The Dursleys shuddered to think what the neighbors would
say if the Potters arrived in the street. The Dursleys knew that the
Potters had a small son, too, but they had never even seen him. This boy
was another good reason for keeping the Potters away; they didn't want
Dudley mixing with a child like that.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>1470, 1847</p><hr size = "10"<p>Plag. conf.</p><p>0.946586144898</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>2785.1247</p><hr size = "10""
style="font-size:14px;display:inline;color:rgb(255,0,0);" id='pass3'>
When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story
starts, there was nothing about the cloudy sky outside to suggest that
strange and mysterious things would soon be happening all over the
country. Mr. Dursley hummed as he picked out his most boring tie for
work, and Mrs. Dursley gossiped away happily as she wrestled a screaming
Dudley into his high chair.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>1850, 2055</p><hr size = "10"<p>Plag. conf.</p><p>0.0105840400639</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>1762.0442</p><hr size = "10""
style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass4'>
My father's family name being Pirrip, and my Christian name Philip, my infant
tongue could make of both names nothing longer or more explicit than Pip. So, I
called myself Pip, and came to be called Pip.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>2057, 3187</p><hr size = "10"<p>Plag. conf.</p><p>0.177879051884</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>1942.3584</p><hr size = "10""
style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass5'>
I give Pirrip as my father's family name, on the authority of his tombstone and my
sister - Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or
my mother, and never saw any likeness of either of them (for their days were long
before the days of photographs), my first fancies regarding what they were like,
were unreasonably derived from their tombstones. The shape of the letters on my
father's, gave me an odd idea that he was a square, stout, dark man, with curly
black hair. From the character and turn of the inscription, "Also Georgiana Wife of
the Above," I drew a childish conclusion that my mother was freckled and sickly. To
five little stone lozenges, each about a foot and a half long, which were arranged
in a neat row beside their grave, and were sacred to the memory of five little
brothers of mine - who gave up trying to get a living, exceedingly early in that
universal struggle - I am indebted for a belief I religiously entertained that they
had all been born on their backs with their hands in their trousers-pockets, and
had never taken them out in this state of existence.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>3189, 4158</p><hr size = "10"<p>Plag. conf.</p><p>0.831630019231</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>2567.0830</p><hr size = "10""
style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass6'>
Ours was the marsh country, down by the river, within, as the river wound, twenty
miles of the sea. My first most vivid and broad impression of the identity of
things, seems to me to have been gained on a memorable raw afternoon towards
evening. At such a time I found out for certain, that this bleak place overgrown
with nettles was the churchyard; and that Philip Pirrip, late of this parish, and
also Georgiana wife of the above, were dead and buried; and that Alexander,
Bartholomew, Abraham, Tobias, and Roger, infant children of the aforesaid, were
also dead and buried; and that the dark flat wilderness beyond the churchyard,
intersected with dykes and mounds and gates, with scattered cattle feeding on it,
was the marshes; and that the low leaden line beyond, was the river; and that the
distant savage lair from which the wind was rushing, was the sea; and that the
small bundle of shivers growing afraid of it all and beginning to cry, was Pip.
</div>
</div>
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li class="active" ><a style="color:rgb(255,0,0);" href='#pass0'>pass0</a></li>
<li ><a style="color:rgb(0,0,0);" href='#pass1'>pass1</a></li>
<li ><a style="color:rgb(0,0,0);" href='#pass2'>pass2</a></li>
<li ><a style="color:rgb(255,0,0);" href='#pass3'>pass3</a></li>
<li ><a style="color:rgb(0,0,0);" href='#pass4'>pass4</a></li>
<li ><a style="color:rgb(0,0,0);" href='#pass5'>pass5</a></li>
<li ><a style="color:rgb(0,0,0);" href='#pass6'>pass6</a></li>
</ul>
</nav>
</div>
However, when I scroll through the text, the active section doesn't get highlighted other than the first.
Please tell me what is going wrong

Answer 1

Working in your jsfiddle, I updated to the latest Bootstrap and Jquery versions (this is not necessary), after that I found in the example the following tags on the <body> element were present: <body data-spy="scroll" data-target=".navbar" data-offset="50">. These attributes should be added to the scrollable area, the target is the navbar which handles the links. Following jsfiddle is working (edit of your code): https://jsfiddle.net/DTcHh/23739/
I added the attributes on the scrollarea and gave the <nav> the ClassName .mynav:
<div style="height: 700px;overflow-y: scroll;" class="panel-body col-md-9" id="document_content" data-spy="scroll" data-target=".mynav" data-offset="50">`